常用的布局组件

Container

常用的属性：

  • child【子节点】

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

举例：padding: EdgeInsets.all(10)

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

举例：margin: EdgeInsets.all(10)

  • decoration【盒子的装饰】

举例：

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

Row

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

属性：

  • children【子元素】

  • mainAxisAlignment【横向对其方式】

  • crossAxisAlignment【纵向对其方式】

Column

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

属性：

  • children【子元素】

  • mainAxisAlignment【纵向对其方式】

  • crossAxisAlignment【横向对其方式】

Expanded

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

需要用在 Row 或 Column 子组件内部。

举例：

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