Futter基础组件之二

标签：完成   rect   pre   实例代码   bsp   and   list   ISE   png   

一、线性布局之Row布局组件（以水平阵列显示其子级的小部件）

　　　属性：Row({

  　　　　　　TextDirection textDirection,   
　　　　　　　　　表示水平方向子组件的布局顺序(是从左往右还是从右往左)，默认为系统当前Locale环境的文本方向 
 　　　　　　 MainAxisSize mainAxisSize = MainAxisSize.max, 
　　　　　　　　　　表示Row在主轴(水平)方向占用的空间，默认是MainAxisSize.max，表示尽可能多的占用水平方向的空间，此时无论子widgets实际占用多少水平空间，
　　　　　　　　　　Row的宽度始终等于水平方向的最大宽度；而MainAxisSize.min表示尽可能少的占用水平空间，当子组件没有占满水平剩余空间，则Row的实际宽度等于所有子组件占用的的水平空间  
 　　　　　　 MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
　　　　　　　　　　表示子组件在Row所占用的水平空间内对齐方式，当MaxinAxisSize定义为min时，次属性无意义；其可选属性可以参考Text控件，其start的位置参考TextDirection的定义，可以理解为：textDirection是mainAxisAlignment的参考系。 　　　　　　 
　　　　　　　VerticalDirection verticalDirection = VerticalDirection.down,
　　　　　　　　　　表示Row纵轴（垂直）的对齐方向，默认是VerticalDirection.down，表示从上到下。  
　　　　　　　CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
　　　　　　　　　　表示子组件在纵轴方向的对齐方式，Row的高度等于子组件中最高的子元素高度，它的取值和MainAxisAlignment一样(包含start、end、 center三个值)
　　　　　　　List<Widget> children = const <Widget>[],
　　　　　　　　　　子组件数组。

　　　　　　})

　　　补充1：常用属性有：MainAxisAlignment children

　　　补充2：Row控件可以分为灵活排列和非灵活排列两种

　　1）.不灵水平布局（不灵活就是根据Row子元素的大小，进行布局。如果子元素不足，它会留有空隙，如果子元素超出，它会警告）

 　　　　代码如下：

　　　　child:Row(

           　　 children: <Widget>[

             　　　　 RaisedButton(

                 　　　　 onPressed: (){},

                  　　　　color: Colors.redAccent,

                  　　child: Text(‘红色按钮‘),

               　　 ),

                　　RaisedButton(

                 　　　　 onPressed: (){},

                  　　　　color: Colors.blueAccent,

                  　　　　child: Text(‘蓝色按钮‘),

                　　),

                　　RaisedButton(

                  　　　　onPressed: (){},

                 　　 　　color: Colors.grey,

                 　　 child: Text(‘灰色按钮‘),

               　　 ),

           　　 ],

        　　  ),

　　

　　补充：不灵活布局中row的大小是根据子元素大小而定的，而并不是自适应父级元素的大小。

　　2).灵活水平布局(解决上面有空隙的问题，可以使用 Expanded来进行解决，也就是我们说的灵活布局)

　　　　用法：Expanded（child:）；将需要进行灵活布局的row的子控件放到Expanded 的child下，该子元素就可以进行灵活布局。

　　　　　　实例代码段：　　　　　

　　　　　　　　Expanded(child:RaisedButton(

                  　　　　onPressed: (){},

                  　　　　color: Colors.redAccent,

　　　　　　　　   child: Text(‘红色按钮‘),

                　　　　),

　　　　效果图：

　　　　　　　　

二、线性布局之Row布局组件（可以在垂直方向排列其子组件）

　　参数和Row一样，不同的是布局方向为垂直，主轴纵轴正好相反，类比Row来理解，属性就不从重复介绍。其灵活布局也可类比row

　　灵活布局及效果图：

　　　　　　　　

 

 

Futter基础组件之二

标签：完成   rect   pre   实例代码   bsp   and   list   ISE   png   

原文地址：https://www.cnblogs.com/Chazz-John/p/11584789.html