窗口小部件基础控件
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<TestPage> {}
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),
),
),
);
}
网友评论