Flutter——UI布局

Posted 2022-11-25 Jason Zhang~

基础布局

• Container
  普通布局，可以指定布局的宽高、背景颜色、子控件的位置规则。

  • width: 布局宽度。不指定则为宽度占满。
  • height: 布局高度。不指定则为高度占满。
  • color: 布局背景颜色。
  • alignment: 子控件位置规则。如Alignment.topLeft，共九个。上中下、左中右分别组合对应。
  • padding/margin: 布局的内外间隔。取值EdgeInsets.all(12)表明上下左右均设为12，EdgeInsets.fromLTRB(12, 24, 0, 0)表明分别设置左上右下间隔为12、24、0、0。
  • decoration: 布局修饰，不可与color属性一起使用。使用示例如下：

    decoration: new BoxDecoration(
     	// 线性渐变色
     	gradient: const LinearGradient(
         	// 方向和色值数组。这里设为从上到下的红绿蓝，默认是从左到右
         	begin: Alignment.topCenter,
         	end: Alignment.bottomCenter,
         	colors: [Colors.red, Colors.green, Colors.blue]
       	)
    )
    

• Center
  将子控件放置在自己内部中心。

  • widthFactor: 宽度系数，正数，父控件宽度/子控件宽度。不指定则为宽度占满。
  • heightFactor: 高度系数，正数，父控件高度/子控件高度。不指定则为高度占满。