Flutter基础控件介绍

Flutter基础控件介绍

StatefulWidget

动态组件，开发中需要改变状态，使用动态组件

StatelessWidget

静态组件，定义后不会再改变

组件按照功能分类

1. 基础类组件

基础组件

Text(文本)，Image(图片)，xxButton(按钮)，TextField(输入框)，Form(表单)

Text('Hello World');

Form

单独说一下Form组件

​ 实际业务中，在正式向服务器提交数据前，都会对各个输入框数据进行合法性校验，但是对每一个TextField都分别进行校验将会是一件很麻烦的事。还有，如果用户想清除一组TextField的内容，除了一个一个清除有没有什么更好的办法呢？为此，Flutter提供了一个Form widget，它可以对输入框进行分组，然后进行一些统一操作，如输入内容校验、输入框重置以及输入内容保存。

​ Form的子孙元素必须是FormField类型，FormField是一个抽象类，定义几个属性，FormState内部通过它们来完成操作。

详细

2. 布局类组件

Row(水平线性布局)，Column(垂直线性布局)，Flex(弹性布局)，Wrap|Flow(流式布局)，Stack|Positioned(层叠布局)

线性布局(Row、Column)

Column(
 crossAxisAlignment: CrossAxisAlignment.start,//子控件对齐方式
 mainAxisSize: MainAxisSize.max,    //自身大小
 children: <Widget>[],	//子控件
)

弹性布局(Flex)

Flex(
        direction: Axis.horizontal,
        children: <Widget>[
          Expanded(
            child: Container(
              height: 30,
              color: Colors.red,),
            flex: 1,),
          Expanded(
            child: Container(
              height: 30,
              color: Colors.blue,),
            flex: 2,
          ),],),

Flex里面的两个Expanded按照1：2平分。

流式布局(Wrap、Flow)

• Wrap直接使用，超过屏幕自动换行
• Flow需要自己算，性能较好，换行规则自己定

Flow因为计算复杂使用较少，优先考虑Wrap是否能实现
详细

层叠布局(Stack、Positioned)

• Stack类似Android中的FrameLayout，子Widget根据到四个角的位置来确定本身的位置，允许子Widget堆叠。
• Flutter中联合使用Stack和Positioned来实现绝对定位，Stack允许子Widget堆叠，Positioned可以给子Widget定位。