各種佈局形式-Flutter

各種佈局形式

Column垂直佈局

• 效果
  
• 源代碼

import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "ccatom",
      home: Scaffold(
        //應用欄
        appBar: AppBar(
          title: Text("使用Column垂直佈局"),
        ),
        body: Column(
          //主軸對齊方式：居中
          //如果用column，那麼垂直就是主軸
          mainAxisAlignment: MainAxisAlignment.center,
          //幅軸對齊方式：右對齊
          //幅軸與主軸垂直
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Center(child:Image.network("https://cdn.jsdelivr.net/gh/cnatom/images/images/logo.png",fit: BoxFit.fitWidth,)),
            //使用Expanded靈活佈局
            Expanded(child:Image.network("https://cdn.jsdelivr.net/gh/cnatom/images/images/logo.png",fit: BoxFit.fitWidth,)),
            Center(child:Image.network("https://cdn.jsdelivr.net/gh/cnatom/images/images/logo.png",fit: BoxFit.fitWidth,)),
//            Center(child:Text('I love coding'))
          ],
        ),
      ),
    );
  }
}

Row水平佈局

• 效果
  
• 源代碼

import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "ccatom",
      home: Scaffold(
        //應用欄
        appBar: AppBar(
          title: Text("使用Row水平佈局"),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Center(
              child: RaisedButton(
                child: Text("“漂浮”按鈕"),
                onPressed: (){},
              ),
            ),

            Center(
              child:RaisedButton(
                child: Text("“漂浮”按鈕"),
                onPressed: (){},
              )
            ),
            Center(
              child: RaisedButton(
                child: Text("“漂浮”按鈕"),
                onPressed: (){},
              ),
            )

          ],
        ),
      ),
    );
  }
}

Stack層疊佈局

• 效果
  

• 源代碼

import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "ccatom",
      home: Scaffold(
        //應用欄
        appBar: AppBar(
          title: Text("Stack層疊佈局"),
        ),
        body: Stack(
          //居中對齊
          alignment: Alignment.center,
          //添加層疊部件
          children: <Widget>[
            //最底層的部件
            //創建一個圓角頭像
            Center(
              child: new CircleAvatar(
                radius: 150.0,
                backgroundImage: NetworkImage("https://cdn.jsdelivr.net/gh/cnatom/images/images/QQ圖片20200108211847.jpg"),
              ),
            ),
            //在圓角頭像上面添加容器
            Container(
              child: Text(
                  "阿騰木的小世界",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 30,
                  //字間距
                  letterSpacing: 10,
                  //添加陰影
                  shadows: [Shadow(color: Colors.blue,blurRadius: 10)]
                ),
              ),
            ),
            //使用Positioned組件進行多組件佈局
            Positioned(
              //距離層疊組件下邊的距離：240
              bottom: 240,
              child: Text(
                "ccatom.com",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  shadows: [Shadow(color: Colors.blue,blurRadius: 10)]
                ),
              ),
            )
          ],

        ),
      ),
    );
  }
}

Card卡片組件佈局

• 效果
  
• 源代碼

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    //單獨聲明Card組件
    Card card = new Card(
      //添加垂直佈局
      child: Column(
        children: <Widget>[
          //用ListTile實現內部列表
          ListTile(
            //添加首部圖片
            leading: CircleAvatar(
              backgroundImage: NetworkImage("https://cdn.jsdelivr.net/gh/cnatom/images/images/head.jpg"),
            ),
            //主標題
            title: Text("張三"),
            //副標題
            subtitle: Text("這就是flutter嗎，i了i了"),
          ),
          //添加分隔線
          Divider(thickness: 0.5),
          ListTile(
            leading: CircleAvatar(
              backgroundImage: NetworkImage("https://cdn.jsdelivr.net/gh/cnatom/images/images/QQ圖片20200108211847.jpg"),
            ),
            title: Text("李四"),
            subtitle: Text("不愧是你"),
          ),
          Divider(),
          ListTile(
            leading: CircleAvatar(
              backgroundImage: NetworkImage("https://cdn.jsdelivr.net/gh/cnatom/images/images/20200123235514.jpg"),
            ),
            title: Text("王五"),
            subtitle: Text("珍愛生命，遠離瘟疫"),
          ),
          Divider(),
        ],
      ),
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("使用Card卡片佈局"),
        ),
        body: Center(
          child: card,
        ),
      ),
    );
  }
}