第三章 flutter布局

Row布局(行布局，水平方向布局)

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "后台标题",
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("水平方向布局"),
        ),
        body: new Row(  //行布局
          children: <Widget>[
            Expanded(child:            //Expanded灵活布局（平分布局大小）
              new RaisedButton(
                onPressed: (){},//点击事件
                color: Colors.redAccent,
                child: new Text("红色按钮"),
              ),
            ),
            new RaisedButton(        //不加Expanded就根据字体大小获得按钮大小
              onPressed: (){},
              color: Colors.blue,
              child: new Text("蓝色按钮"),
            ),
            Expanded(child:
              new RaisedButton(
                onPressed: (){},
                color: Colors.lightGreenAccent,
                child: new Text("绿色按钮"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Column垂直方向布局

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "后台标题",
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("垂直方向布局"),
        ),
        //这个位置把Center去掉的话只能根据屏幕垂直居中，使用要加上Center才能完美屏幕居中
        body:Center(child: new Column(//垂直布局
            crossAxisAlignment: CrossAxisAlignment.center,//根据文本最长的对齐方式 center居中对齐 end尾部对齐  start头对齐
            mainAxisAlignment: MainAxisAlignment.center,//相对于Column界面垂直方向居中对齐
            children: <Widget>[
              Text("文本1"),
              //加入Expanded可以使文本3去到底部，文本1在顶部，文本2在文本1下面，Expanded把文本2进行了填充
              Expanded(child: Text("文本2文本2文本2文本2"),),
              Text("文本3"),
            ],
          )
        )
      ),
    );
  }
}

Stack层叠布局

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    var stack=new Stack(    
      alignment: const FractionalOffset(0.5, 0.94),//配置文本的位置
      children: <Widget>[
        new CircleAvatar(//圆形图片
          backgroundImage: new NetworkImage('http://img5.mtime.cn/mt/2020/11/22/123214.39240924_1280X720X2.jpg'),
          radius: 100.0,
        ),
        new Container(//盒子容器
          decoration: new BoxDecoration(
            color: Colors.blue
          ),
          padding: EdgeInsets.all(5.0),
          child: Text("注意呀"),
        )
      ],
    );
    return MaterialApp(
      title: "后台标题",
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("Stack层叠布局"),
        ),
        body:Center(
          child: stack,//引用stack
        )
      ),
    );
  }
}

绝对定位（适合多元素重叠）

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    var stack=new Stack(
      alignment: const FractionalOffset(0.5, 0.94),//配置文本的位置
      children: <Widget>[
        new CircleAvatar(//圆形图片
          backgroundImage: new NetworkImage('http://img5.mtime.cn/mt/2020/11/22/123214.39240924_1280X720X2.jpg'),
          radius: 100.0,
        ),
        new Positioned(//相对于css的绝对定位
          top: 10.0,
          left: 10.0,
          child: new Text("文本1"),
        ),
        new Positioned(
          bottom: 10.0,
          right: 10.0,
          child: new Text("文本2"),
        )
      ],
    );
    return MaterialApp(
      title: "后台标题",
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("Stack层叠布局"),
        ),
        body:Center(
          child: stack,//引用stack
        )
      ),
    );
  }
}

ListView和GridView网格第二章已有

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    var card=new Card(//定义一个卡片布局
      child: Column(
        children: <Widget>[
          ListTile(
            title: Text('广东省普宁市',style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: Text("WWT1008611"),
            leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
          ),new  Divider(),//分割线
          ListTile(
            title: Text('广东省普宁市',style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: Text("WWT1008611"),
            leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
          ),new  Divider(),//分割线
          ListTile(
            title: Text('广东省普宁市',style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: Text("WWT1008611"),
            leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
          ),
        ],
      ),
    );
    return MaterialApp(
      title: "后台标题",
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("卡片布局"),
        ),
        body:Center(
          child: card,//引用card
        )
      ),
    );
  }
}