Flutter快速上手8：基础布局之辅助布局

一、Center

水平垂直居中布局。类似Container设置alignment

二、SizedBox

固定宽高布局，类似Container设置了宽高

三、AspectRatio

宽高比布局。

AspectRatio(
              aspectRatio: 16 / 9,
              child: Container(
                color: Colors.yellow,
              ),            
),

四、FractionallySizedBox

百分比布局。

SizedBox(
              height: 200,
              child: FractionallySizedBox(
                alignment: Alignment.center,
                widthFactor: 0.5,
                heightFactor: 0.5,
                child: Container(
                  color: Colors.pink,
                ),
              ),           
 ),

WX20220420-104917.png

这里注意百分比布局外层一定是一个有大小的容器（如SizedBox、Container），否则会报错。

五、Card

卡片布局。

const Card({
    Key? key,
    this.color,
    this.shadowColor,//阴影颜色
    this.elevation,//阴影高度
    this.shape,
    this.borderOnForeground = true,
    this.margin,//外边距
    this.clipBehavior,
    this.child,
    this.semanticContainer = true,
  })

Card(
              elevation: 15,
              color: Colors.pink,
              shadowColor: Colors.green,
              margin: const EdgeInsets.all(20),
              child: Column(
                children: const [
                  Text('我是标题'),
                  SizedBox(height: 10,),
                  Text('我是xiao标题'),
                ],
              ),
            ),

20220420110232.jpg

本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子，初学Flutter ，文章会根据学习进度不定时更新，请多多指教~~