Flutter学习-布局

1. 水平布局

//引入库
import 'package:flutter/material.dart';

//主函数
void main() => runApp(MyApp());

//类，继承无状态组件
class MyApp extends StatelessWidget {
  //重写函数
  @override
  //返回值为Widget类型
  Widget build(BuildContext context) {
    //对应函数类型返回值
    return MaterialApp(
        //dart结构，title和home
        title: 'flutter study',
        //home，故用脚手架
        home: Scaffold(
          //顶上一个appBar
          appBar: AppBar(
            title: Text('水平方向布局'),
          ),
          //中间是身体
          //横向布局
          body: Row(
            children: <Widget>[
              //不灵活布局：按钮宽度固定（根据子元素大小）
              RaisedButton(
                color: Colors.yellow,
                child: Text('黄色按钮'),
                onPressed: () {}, //若此处写为：onPressed: null,则颜色不显示
              ),
              //灵活布局：自动充满空隙
              Expanded(
                  child: RaisedButton(
                onPressed: () {},
                color: Colors.blue,
                child: Text('蓝色按钮'),
              )),
              RaisedButton(
                onPressed: () {},
                color: Colors.red,
                child: Text('红色按钮'),
              ),
            ],
          ),
        ));
  }
}

运行效果：

2. 纵向布局

home: Scaffold(
            //顶上一个appBar
            appBar: AppBar(
              title: Text('垂直方向布局'),
            ),
            //中间是身体
            //纵向布局
            body: Center(
                child: Column(
              //副轴对齐方式
              crossAxisAlignment: CrossAxisAlignment.center,
              //主轴对齐
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'i am superman',
                  style: Theme.of(context).textTheme.display2,
                ),
                //灵活布局
                Expanded(
                    child: Text(
                  'i am spiderman',
                  style: Theme.of(context).textTheme.display2,
                )),
                Text(
                  'i am batman',
                  style: Theme.of(context).textTheme.display2,
                ),
              ],
            )))

运行效果：

3. 层叠布局

 //层叠布局
    var stack = new Stack(
      //对齐
      alignment: const FractionalOffset(0.4, 0.8),
      children: <Widget>[
        //圆形头像
        new CircleAvatar(
          //背景图片
          backgroundImage: new NetworkImage(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572502932610&di=b7701431bca3f4718d4131a2eba926d9&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F80cb39dbb6fd5266bf636baea018972bd407363b.jpg'),
          //半径
          radius: 150.0,
        ),
        new Container(
          decoration: new BoxDecoration(
            color: Colors.red,
          ),
          padding: EdgeInsets.all(5.0),
          child: new Text(
            '皮卡丘',
            style: TextStyle(fontSize: 25),
          ),
        )
      ],
    );
    //对应函数类型返回值
    return MaterialApp(
        //dart结构，title和home
        title: 'flutter study',
        //home，故用脚手架
        home: Scaffold(
            //顶上一个appBar
            appBar: AppBar(
              title: Text('层叠布局'),
            ),
            //中间是身体
            //层叠布局
            body: Center(child: stack)));

运行效果：

4. 卡片布局

//卡片布局
    var card = Card(
      child: Column(
        children: <Widget>[
          ListTile(
            title:
                new Text('北京', style: TextStyle(fontWeight: FontWeight.w500)),
            subtitle: new Text('超人 12345678910'),
            leading: new Icon(Icons.account_box, color: Colors.lightBlue),
          ),
          new Divider(),
          ListTile(
            title:
                new Text('上海', style: TextStyle(fontWeight: FontWeight.w500)),
            subtitle: new Text('蜘蛛侠 12345678911'),
            leading: new Icon(Icons.account_box, color: Colors.lightBlue),
          ),
          new Divider(),
          ListTile(
            title:
                new Text('广州', style: TextStyle(fontWeight: FontWeight.w500)),
            subtitle: new Text('蝙蝠侠 12345678912'),
            leading: new Icon(Icons.account_box, color: Colors.lightBlue),
          ),
          new Divider(),
        ],
      ),
    );
    //对应函数类型返回值
    return MaterialApp(
        //dart结构，title和home
        title: 'flutter study',
        //home，故用脚手架
        home: Scaffold(
            //顶上一个appBar
            appBar: AppBar(
              title: Text('卡片布局'),
            ),
            //中间是身体
            //卡片布局
            body: card));

运行效果：