窗口小部件基础控件
1.基础两种状态的widget,所有的widget都是继承此两种状态。
StatelessWidget (代表只有一种状态的组件)
例如: Icon、 IconButton, 和Text 都是无状态widget, 他们都是 StatelessWidget的子类.
StatefulWidget (表示可能有多种状态)
例如:Checkbox, Radio, Slider, InkWell, Form, and TextField 他们都是 StatefulWidget的子类。
1).通俗点讲就是:
stateful组件就是和用户交互后会有状态变化,例如滚动条Slider。
stateless组件就是交互后没有状态变化,例如显示的一个文本Text。
2).如何创建一个stateful 组件
创建有状态的组件可以遵循以下步骤:
- 创建一个继承自StatefulWidget的类来表示你要自定义的可变控件
- 创建一个继承自State的类来处理这个可变控件的状态和显示样式(build方法)。
- 当用户交互发生,例如onPressed点击事件被触发时,可以调用setState方法告诉组件需要重绘.
class HomeApp extends StatelessWidget {}
class TestPage extends StatefulWidget {}
class TestPageState extends State
2.内部处理,build核心业务处理区
在Widget组件中都是通过build方法来描述自己的内部结构。
这里的build表示构建MyApp中使用的是MaterialApp的系统组件。
class testApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(//MaterialApp
title: 'Sample App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: testHomePage(),//Scaffold(….);
);
}
}
3.home标签的值:
Scaffold是Material library 中提供的一个组件,我们可以在里面设置导航栏、标题和包含主屏幕widget树的body属性。可以看到这里是在页面上添加了AppBar和一个Text,body的Center是一个可以把子组件放在中心的组件。
Text:该 widget 可让创建一个带格式的文本。
Row、 Column: 这些具有弹性空间的布局类Widget可让您在水平(Row)和垂直(Column)方向上创建灵活的布局。
Stack: 取代线性布局 (译者语:和Android中的LinearLayout相似),Stack允许子 widget 堆叠, 你可以使用 Positioned来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位(absolute positioning )布局模型设计的。
Container: Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也可以具有边距(margins)、填充(padding)和应用于其大小的约束(constraints)。另外, Container可以使用矩阵在三维空间中对其进行变换。
以下示例显示如何使用填充显示简单窗口小部件(核心渲染控件):
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample App"),
),
body: Center(
child: CupertinoButton(
onPressed: () {
setState(() { _pressedCount += 1; });
},
child: Text('Hello'),
padding: EdgeInsets.only(left: 10.0, right: 10.0),
),
),
);
}