常用的布局组件

Container

常用的属性:

  • child【子节点】

  • padding【内容距离盒子边界的距离】

    举例:padding: EdgeInsets.all(10)

  • margin 【盒子边界之外的距离】

    举例:margin: EdgeInsets.all(10)

  • decoration【盒子的装饰】

    举例:

    decoration: BoxDecoration(
        color: Colors.red,
        border: Border(bottom: BorderSide(width: 5, color: Colors.cyan)))
    

Row

使内部的 children 子元素横向布局

属性:

  • children【子元素】

  • mainAxisAlignment【横向对其方式】

  • crossAxisAlignment【纵向对其方式】

Column

使内部的 children 子元素纵向布局

属性:

  • children【子元素】

  • mainAxisAlignment【纵向对其方式】

  • crossAxisAlignment【横向对其方式】

Expanded

主要用来控制 flex 布局的占位宽度。

需要用在 RowColumn 子组件内部。

举例:

Row(
  children: <Widget>[
    Expanded(child: Text('主体内容1'), flex: 2,),
    Expanded(child: Text('主体内容2'), flex: 1,)
  ]
)

results matching ""

    No results matching ""