Flutter-5.Column详细使用

Flutter开发

Posted by 松下百合子 on March 27, 2019

开发Flutter应用中使用到相关知识,当做笔记记之。

官网api

  • https://docs.flutter.io/flutter/widgets/Row-class.html

  • https://blog.csdn.net/huyongl1989/article/details/83745871

构造函数

1
2
3
4
5
6
7
8
9
10
11
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>[],
  })

关键属性

  • key: 该属性代表当前widget的唯一标识符(类似于Android中的id),在程序运行过程中,如果想调用该widget的某个方法,那就需要设置该属性值,该属性不是必须值
  • mainAxisAlignment: 子元素在主轴的对齐方式,Column的主轴即为垂直方向
  • mainAxisSize: 主轴方向大小适配方式,只有两种取值方式: MainAxisSize.max 主轴方向大小(在Column中指高度)与父容器大小相同(即Android中的match_parent) MainAxisSize.min 主轴方向大小(在Column中指高度)由子元素决定(即Android中的wrap_content)
  • crossAxisAlignment: 子元素在交叉轴(水平方向)的对齐方式
  • children: 子元素列表