iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Mobile Development

30天 - Flutter 日常系列 第 4

[Day4] Flutter - 水平佈局容器 ( Row )

  • 分享至 

  • xImage
  •  

前言

Hi, 我是魚板伯爵今天要教大家 Row 這個容器,教學內容只會擷取片段程式碼,建議大家搭配完整程式碼來練習。

完整程式碼

常用屬性

Row 裡面的容器會以水平方式排列,mainAxisAlignment控制橫向對齊,crossAxisAlignment則是以縱向對齊,下面範例是置中。

class DemoRow extends StatelessWidget {
  const DemoRow({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          width: 50,
          height: 50,
          color: Colors.amber,
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.redAccent,
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.blueAccent,
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.cyanAccent,
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.limeAccent,
        ),
      ],
    );
  }
}


上一篇
[Day3] Flutter - 改變容器風格 ( Container )
下一篇
[Day5] Flutter - 垂直佈局容器 ( Column )
系列文
30天 - Flutter 日常30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言