Flutter开发（五）——水平布局、垂直布局、卡片布局和层叠布局

一、水平布局

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: 'Row Widget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('垂直方向布局'),
        ),
        body: new Column(
          children: <Widget>[
            Expanded(
              child:new RaisedButton(
              onPressed: (){},//这个是如果按了按钮会进行的操作，我们现在还没有就先不写
              color: Colors.lightBlue,
              child: new Text('blue button'),
              )
            ),
            Expanded(
              child:new RaisedButton(
              onPressed: (){},
              color: Colors.pink[200],
              child: new Text('pink button'),
              )
            ),
            Expanded(
              child:new RaisedButton(
              onPressed: (){},
              color: Colors.orange,
              child: new Text('orange button'),
              )
            ),
          ],
        ),
      ),      
    );
  }
}

 注意我三个按钮都使用了Expanded所以他们三个才能占满整个水平方向的屏幕

二、垂直布局

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: 'Column Widget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('垂直方向布局'),
        ),
        body: Center(
          child:new Column(
            mainAxisAlignment: MainAxisAlignment.center,//主轴是相对于你的布局方向来说的，如果你是水平布局那水平轴就是主轴，如果你是垂直布局那竖直轴就是主轴
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              new RaisedButton(
              onPressed: (){},//这个是如果按了按钮会进行的操作，我们现在还没有就先不写
              color: Colors.lightBlue,
              child: new Text('blue button'),
              ),
              
              new RaisedButton(
              onPressed: (){},
              color: Colors.pink[200],
              child: new Text('pink button'),
              ),

              new RaisedButton(
              onPressed: (){},
              color: Colors.grey,
              child: new Text('grey button'),
              )
            ],
          ),
        )
      ),      
    );
  }
}

有没有发现他们三个不能占满整个竖直方向的屏幕，那是因为我们没有加Expanded

自己可以试试

三、卡片布局

其实也没什么特别的就是看起来像卡片的样子

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(
            leading: Icon(Icons.person_add,color: Colors.lightBlue,),
            title: Text('某大学西校区学生公寓六号楼'),
            subtitle: Text('roadkiller:15550313333'),
          ),
          new Divider(),
          ListTile(
            leading: Icon(Icons.person_add,color: Colors.lightBlue,),
            title: Text('某大学西校区学生公寓六号楼'),
            subtitle: Text('路小哥:15550313333'),
          ),
          new Divider(),
          ListTile(
            leading: Icon(Icons.person_add,color: Colors.lightBlue,),
            title: Text('某大学西校区学生公寓六号楼'),
            subtitle: Text('陈小哥:15550313333'),
          ),
        ],
      ),
    );
    return MaterialApp(
      title: 'Stack Widget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('卡片布局'),
        ),
        body: Center(
          child: card,
        )
      ),      
    );
  }
}

 

四、层叠布局

如果我们想要在图片上面层叠放一些字或者Container，就需要采用层叠布局，Stack

注意alignment里的FractionalOffset的使用

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  
  @override
  Widget build(BuildContext context)
  {
    var stack = new Stack(//自己写一个Stack组件，减少嵌套，避免恶心
    alignment:const FractionalOffset(0.5, 0.9),//注意里边的参数是从0~1的，原点在左上角，所以这两个参数可以让容器固定在图片的正下方
    children: <Widget>[
      new CircleAvatar(//一个头像
        backgroundImage: NetworkImage('https://i1.hdslb.com/bfs/archive/1791fb4c554b65d4bc2d25dfbe6558bceec9066f.jpg'),//这个引入图片的语法和之前不一样注意
        radius: 100.0,
      ),
      new Container(
        decoration: BoxDecoration(  
          color: Colors.pinkAccent[200],
        ),
        child: Text('鬼舞姬——阿卡丽'),
      )
    ],
  );
    return MaterialApp(
      title: 'Stack Widget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('层叠布局'),
        ),
        body: Center(
          child: stack,
        )
      ),      
    );
  }
}

 

我打LOL钟爱阿卡丽！

我打LOL钟爱阿卡丽！

我打LOL钟爱阿卡丽！

哦对了补充一哈还有相对定位 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  
  @override
  Widget build(BuildContext context)
  {
    var stack = new Stack(
    children: <Widget>[
      new CircleAvatar(
        backgroundImage: NetworkImage('https://i1.hdslb.com/bfs/archive/1791fb4c554b65d4bc2d25dfbe6558bceec9066f.jpg'),
        radius: 100.0,
      ),
      new Positioned(
        top: 20.0,
        left: 0.0,
          child: new Container(
            child: new Text('我女神'),
            color: Colors.pinkAccent[100],
          )
      ),
      new Positioned(
        bottom: 20.0,
        right: 45.0,
          child: new Container(
            child: new Text('鬼舞姬——阿卡丽'),
            color: Colors.pinkAccent[200],
          )
      )
    ],
  );
    return MaterialApp(
      title: 'Stack Widget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('层叠布局'),
        ),
        body: Center(
          child: stack,
        )
      ),      
    );
  }
}

 

昨天刚退游，最近太忙了，好多事

考驾照（0.01 / 1）

练习某曲子钢伴（0.01 / 1）

Flutter学习

大物补考还得看习题册啊（0 / 1）

安.兰德《源泉》（0.5 / 1）

还没有骑车去周村 (0 / 1)

半程马拉松训练计划也不能懈怠

总之

加油吧