Flutter第5天-Widget介绍

窗口小部件基础控件

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 组件

创建有状态的组件可以遵循以下步骤：

1. 创建一个继承自StatefulWidget的类来表示你要自定义的可变控件
2. 创建一个继承自State的类来处理这个可变控件的状态和显示样式（build方法）。
3. 当用户交互发生，例如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),

  ),

),

);

}