阅读 3471

Flutter 布局控件篇-->Row、Column

Flutter 中的RowColumn被称之为线性布局,所谓线性布局,即指沿水平或垂直方向排布子组件。

轴的概念

对于线性布局,有主轴纵轴之分。

如果布局是沿水平方向,那么主轴就是指水平方向,而纵轴即垂直方向;

如果布局沿垂直方向,那么主轴就是指垂直方向,而纵轴就是水平方向。

在线性布局中,有两个定义对齐方式的枚举类MainAxisAlignmentCrossAxisAlignment,分别代表主轴对齐和纵轴对齐。

Row

Row可以在水平方向排列其子组件

构造函数如下:

Row({
	Key key,
	MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
	MainAxisSize mainAxisSize = MainAxisSize.max,
	CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
	TextDirection textDirection,
	VerticalDirection verticalDirection = VerticalDirection.down,
	TextBaseline textBaseline,
	List<Widget> children = const <Widget>[],
})
复制代码

属性解释

textDirection

表示水平方向子组件的布局顺序(是从左往右还是从右往左),默认从左往右

mainAxisSize

表示Row在主轴(水平)方向占用的空间,
默认是MainAxisSize.max,表示尽可能多的占用水平方向的空间
MainAxisSize.min表示尽可能少的占用水平空间

mainAxisAlignment

(相当于H5中Flex布局的处理项目的富余空间 --- Flex 布局教程

表示子组件在Row所占用的水平空间内对齐方式(只有当mainAxisSize的值为MainAxisSize.max时,此属性才有意义)

  • MainAxisAlignment.start表示文本内容沿textDirection的初始方向对齐,(如textDirection取值为TextDirection.ltr时,则表示左对齐,textDirection取值为TextDirection.rtl时表示从右对齐。)

  • MainAxisAlignment.endMainAxisAlignment.start正好相反;

  • MainAxisAlignment.center表示文本内容居中对齐

  • MainAxisAlignment.spaceAround表示每个组件两边的富余空间相等

  • MainAxisAlignment.spaceBetween表示将富裕空间平分为(内容-1)段

  • MainAxisAlignment.spaceEvenly表示将富裕空间平分为(内容+1)段,(经常使用)

代码示例:

child: Column(
  children: <Widget>[
	Row(
	  mainAxisAlignment: MainAxisAlignment.start,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),  //表示一条横线
	Row(
	  mainAxisAlignment: MainAxisAlignment.end,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),
	Row(
	  mainAxisAlignment: MainAxisAlignment.center,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),
	Row(
	  mainAxisAlignment: MainAxisAlignment.spaceAround,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),
	Row(
	  mainAxisAlignment: MainAxisAlignment.spaceBetween,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
	Divider(),
	Row(
	  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
	  children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')],
	),
  ],
),
复制代码

运行效果:

verticalDirection

表示Row纵轴(垂直)的对齐方向,默认是VerticalDirection.down,表示从上到下。

crossAxisAlignment

表示子组件在纵轴方向的对齐方式,Row的高度等于子组件中最高的子元素高度,它的取值和MainAxisAlignment一样(包含startendcenter三个值),

不同的是crossAxisAlignment的参考系是verticalDirection

verticalDirection值为VerticalDirection.downcrossAxisAlignment.start指顶部对齐,

verticalDirection值为VerticalDirection.up时,crossAxisAlignment.start指底部对齐;
crossAxisAlignment.endcrossAxisAlignment.start正好相反;

children

子组件数组

Column

Column可以在垂直方向排列其子组件。
参数和Row一样,不同的是布局方向为垂直,主轴纵轴正好相反。

构造函数如下:

Column({
	Key key,
	MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
	MainAxisSize mainAxisSize = MainAxisSize.max,
	CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
	TextDirection textDirection,
	VerticalDirection verticalDirection = VerticalDirection.down,
	TextBaseline textBaseline,
	List<Widget> children = const <Widget>[],
})
复制代码

注:RowColumn都只会在主轴方向占用尽可能大的空间,而纵轴的长度则取决于他们最大子元素的长度

如果我们想让文本控件在整个手机屏幕中间对齐,那么我们有两种方法:

  1. Column的宽度指定为屏幕宽度,我们可以通过ConstrainedBoxSizedBox来强制更改宽度限制,

例如:

ConstrainedBox(
  constraints: BoxConstraints(minWidth: double.infinity), 
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text("Hello"),
      Text("World"),
    ],
  ),
);
复制代码

minWidth设为double.infinity,可以使宽度占用尽可能多的空间。

  1. 使用Center Widget;

控件嵌套

如果Row里面嵌套Row,或者Column里面再嵌套Column

那么只有对最外面的RowColumn会占用尽可能大的空间,里面RowColumn所占用的空间为实际大小,

示例:

Container(
  color: Colors.green,
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max, //有效,外层Colum高度为整个屏幕
      children: <Widget>[
        Container(
          color: Colors.red,
          child: Column(
            mainAxisSize: MainAxisSize.max,//无效,内层Colum高度为实际高度  
            children: <Widget>[
              Text("hello world "),
              Text("I am Jack "),
            ],
          ),
        )
      ],
    ),
  ),
);
复制代码

如果要让里面的Column占满外部Column,可以使用Expanded组件:

Expanded( 
  child: Container(
    color: Colors.red,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center, //垂直方向居中对齐
      children: <Widget>[
        Text("hello world "),
        Text("I am Jack "),
      ],
    ),
  ),
)
复制代码

关于Expanded的使用,请参考文章:Flutter 布局控件篇-->Flex、Expanded

传送门

Flutter 布局控件篇-->Align、Center

Flutter 布局控件篇-->Stack、Positioned

Flutter 布局控件篇-->Wrap、Flow

Flutter 布局控件篇-->Flex、Expanded


T_T

文章分类
前端
文章标签