Flutter学习之Padding,Row,Column,Expanded组件

2020年2月27日08:47:00 发表评论 85 views

Padding组件

因为Flutter中有很多Widget没有padding属性,所以我们可以使用Padding组件处理容器与子元素直接的间隔。

属性说明
paddingpadding值,EdgeInsets设置值
child子组件

Row水平布局组件

属性说明
mainAxisAlignment主轴排序方式
crossAxisAlignment次轴排序方式
children
children子组件

Column垂直布局组件

属性说明
mainAxisAlignment主轴排序方式
crossAxisAlignment次轴排序方式
children子组件

RowColumn默认会在主轴方向取最大,Row相对应LinearLayoutlayout_widthmatch_parentColumn相对应LinearLayoutlayout_heightmatch_parent

属性图解

mainAxisAlignment图解

在讲解mainAxisAlignment时,我们一样树立这个一个概念:主轴和交叉轴。如果是Column,主轴是竖直轴,交叉轴是水平轴;如果是Row,主轴是水平轴,交叉轴是竖直轴。
接下来我们看一下mainAxisAligment的几个属性

enum MainAxisAlignment {
 start,
 end,
 center,
 spaceBetween,
 spaceAround,
 spaceEvenly,
}

start:
Flutter学习之Padding,Row,Column,Expanded组件
end:
Flutter学习之Padding,Row,Column,Expanded组件
center:居中显示Flutter学习之Padding,Row,Column,Expanded组件
spaceBetween:将空闲空间均匀地放在子’Widget’之间
Flutter学习之Padding,Row,Column,Expanded组件
spaceAround:将主轴方向上的空白区域均分,使得children之间的空白区域相等,但是首尾child的空白区域为1/2
Flutter学习之Padding,Row,Column,Expanded组件
spaceEvenly:将主轴方向上的空白区域均分,使得children之间的空白区域相等,包括首尾child;
Flutter学习之Padding,Row,Column,Expanded组件

mainAxisSize图解

MainAxisSize的取值有两种:

max:根据传入的布局约束条件,最大化主轴方向的可用空间;
min:与max相反,是最小化主轴方向的可用空间;
从这里可以看出来这两个属性与我们接触过的Androidmatch_parentwrap_content相似。

这里值得注意的是如果我们将mainAxisSize设置为min,还设置了mainAxisAlignment可能会导致其效果展示不出来。
主轴方向默认取最大,可以设置为取最小

代码如下:

class WidgetTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          color: ,
        ),Container(
          width: 100,
          height: 100,
          color: ,
        ),Container(
          width: 100,
          height: 100,
          color: ,
        )
      ],
    );
  }
}

效果如下,可以从图中看出,主轴并没有像我们想的那样出现间隙。
Flutter学习之Padding,Row,Column,Expanded组件

关于textDirection和verticalDirection我们不必死记硬背Row中是谁控制谁,在Column中是谁控制谁

我们只需要记住
textDirection就是用来控制水平方向的起始位置和排列方向
verticalDirection就是用来控制垂直方向的起始位置和排列方向

然后记住
MainAxisAlignment(主轴)就是与当前控件方向一致的轴
CrossAxisAlignment(交叉轴)就是与当前控件方向垂直的轴

Expanded 布局

可以把Expanded布局中的flex看作Androidxml属性中的android:layout_weight这个属性

flex:如果为0或null,则child是没有弹性的,即不会被扩伸占用的空间。如果大于0,所有的Expanded按照其flex的比例来分割主轴的全部空闲空间
接下来,为了熟练掌握进行demo的书写:大致效果为:
Flutter学习之Padding,Row,Column,Expanded组件

void main() => runApp(WidggetTestApp());

class WidggetTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Row,Column学习'),
        ),
        body: WidgetTest(),
      ),
    );
  }
}

class WidgetTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: (5),
      child: Column(
        children: <Widget>[
          Container(
            height: 200,
            color: ,
          ),
          SizedBox(
            height: 5,
          ),
          Container(
            height: 200,
            child:  Row(
              children: <Widget>[
                Expanded(
                    flex: 2,
                    child: Container(
                      height: 200,
                      child: (""
                        ,fit: ,
                      ),
                    )
                ),
                SizedBox(
                  width: 5,
                  
                ),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Expanded(
                        flex: 1,
                        child: ('' ,fit: ,) ,
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Expanded(
                        flex: 1,
                        child: ('' ,fit: ,) ,
                      ),

                    ],
                  ) ,
                ),

              ],
            ),
          )
        ],
      ),
    );
  }
}

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: