各种布局形式-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,
        ),
      ),
    );
  }
}