第四节 Row、Column、Stack层叠布局、Card卡片布局

Row

不灵活排列

main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
       body: Row(
         children: <Widget>[
           RaisedButton(
               onPressed:(){},
             child: Text('红色按钮'),
             color: Colors.red,
           ),
           RaisedButton(
             onPressed:(){},
             child: Text('绿色按钮加宽加宽'),
             color: Colors.blue,
           ),
           RaisedButton(
             onPressed:(){},
             child: Text('黄色按钮'),
             color: Colors.yellow,
           ),
         ],
       ),
      ),
    );
  }
}

可以放下所有按钮

如果容不下所有的按钮，会有警告信息

灵活排列

main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
       body: Row(
         children: <Widget>[
           Expanded(
               child: RaisedButton(
                 onPressed:(){},
                 child: Text('红色按钮'),
                 color: Colors.red,
               ),
           ),
           Expanded(
             child: RaisedButton(
               onPressed:(){},
               child: Text('绿色按钮'),
               color: Colors.blue,
             ),
           ),
           Expanded(
             child: RaisedButton(
               onPressed:(){},
               child: Text('黄色按钮'),
               color: Colors.yellow,
             ),
           )
         ],
       ),
      ),
    );
  }
}

三个按钮宽度相同

main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
       body: Row(
         children: <Widget>[
           Expanded(
               child: RaisedButton(
                 onPressed:(){},
                 child: Text('红色按钮'),
                 color: Colors.red,
               ),
           ),
           Expanded(
             child: RaisedButton(
               onPressed:(){},
               child: Text('绿色按钮加宽加宽加宽加宽'),
               color: Colors.blue,
             ),
           ),
           Expanded(
             child: RaisedButton(
               onPressed:(){},
               child: Text('黄色按钮'),
               color: Colors.yellow,
             ),
           )
         ],
       ),
      ),
    );
  }
}

三个按钮上的文字长度不同

这个就不好看了，会自动拉伸按钮高度，实际开发中都是灵活与不灵活的混用

main.dart文件

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
       body: Row(
         children: <Widget>[
           RaisedButton(
             onPressed:(){},
             child: Text('红色按钮'),
             color: Colors.red,
           ),
           Expanded(
             child: RaisedButton(
               onPressed:(){},
               child: Text('绿色按钮加宽加宽加宽加宽'),
               color: Colors.blue,
             ),
           ),
           RaisedButton(
             onPressed:(){},
             child: Text('黄色按钮'),
             color: Colors.yellow,
           ),
         ],
       ),
      ),
    );
  }
}

灵活与不灵活的混用

Column

灵活与不灵活混排

main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '垂直方向布局'
          ),
        ),
       body: Column(
         children: <Widget>[
           RaisedButton(
             onPressed:(){},
             child: Text('红色按钮'),
             color: Colors.red,
           ),
           Expanded(
             child: RaisedButton(
               onPressed:(){},
               child: Text('绿色按钮加宽加宽加宽加宽'),
               color: Colors.blue,
             ),
           ),
           RaisedButton(
             onPressed:(){},
             child: Text('黄色按钮'),
             color: Colors.yellow,
           ),
         ],
       ),
      ),
    );
  }
}

灵活与不灵活混排

可以添加crossAxisAlignment属性
比如：crossAxisAlignment: CrossAxisAlignment.start

main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '垂直方向布局'
          ),
        ),
       body: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
           RaisedButton(
             onPressed:(){},
             child: Text('红色按钮'),
             color: Colors.red,
           ),
           Expanded(
             child: RaisedButton(
               onPressed:(){},
               child: Text('绿色按钮加宽加宽加宽加宽'),
               color: Colors.blue,
             ),
           ),
           RaisedButton(
             onPressed:(){},
             child: Text('黄色按钮'),
             color: Colors.yellow,
           ),
         ],
       ),
      ),
    );
  }
}

控制crossAxisAlignment属性

还有一个属性：mainAxisAlignment控制主轴的对齐方式，在Column布局中，主轴就是y轴，crossAxisAlignment代表副轴，也就是x轴，在Row布局中正好相反

main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '垂直方向布局'
          ),
        ),
       body: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           RaisedButton(
             onPressed:(){},
             child: Text('红色按钮'),
             color: Colors.red,
           ),
           RaisedButton(
             onPressed:(){},
             child: Text('绿色按钮加宽加宽加宽加宽'),
             color: Colors.blue,
           ),
           RaisedButton(
             onPressed:(){},
             child: Text('黄色按钮'),
             color: Colors.yellow,
           ),
         ],
       ),
      ),
    );
  }
}

image.png

Stack层叠布局

main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    var stack=Stack(
      //alignment属性是控制层叠的位置的，建议在两个内容进行层叠时使用。
      // 它有两个值X轴距离和Y轴距离，值是从0到1的，都是从上层容器的左上角开始算起的。
      alignment: FractionalOffset(0.5, 0.9),
      children: <Widget>[
        CircleAvatar(
          backgroundImage: NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551334978013&di=7b1b35c74c9bc8df435a0b49c36e00c2&imgtype=0&src=http%3A%2F%2Fwenwen.soso.com%2Fp%2F20110730%2F20110730185416-947849180.jpg'),
          radius: 100.0,
        ),

        Container(
          child: Text(
              '点击更换头像',
            style: TextStyle(
              color: Colors.blueAccent
            )
          )
        )
      ],
    );
    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '垂直方向布局'
          ),
        ),
        body: Center(
          child: stack,
        ),
      ),
    );
  }
}

image.png

Stack中运用Positioned组件实现多个组件的层叠

main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    var stack=Stack(
      children: <Widget>[
        CircleAvatar(
          backgroundImage: NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551334978013&di=7b1b35c74c9bc8df435a0b49c36e00c2&imgtype=0&src=http%3A%2F%2Fwenwen.soso.com%2Fp%2F20110730%2F20110730185416-947849180.jpg'),
          radius: 100.0,
        ),

        Container(
          child: Positioned(
            child: Text('头像'),
            top: 150.0,
            left: 70.0,
          )),
        Container(
            child: Positioned(
              child: Text('点击'),
              top: 170.0,
              left: 70.0,
            )),
        
      ],
    );
    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '垂直方向布局'
          ),
        ),
        body: Center(
          child: stack,
        ),
      ),
    );
  }
}

Positioned组件的使用

Card卡片布局

mian.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    var card=Card(
      child: Column(
        children: <Widget>[
          ListTile(
            title: Text('主标题1'),
            subtitle: Text("副标题1"),
            leading: Icon(Icons.account_balance),
          ),
          Divider(),
          ListTile(
            title: Text('主标题2'),
            subtitle: Text("副标题2"),
            leading: Icon(Icons.access_time),
          ),
          Divider(),
          ListTile(
            title: Text('主标题3'),
            subtitle: Text("副标题3"),
            leading: Icon(Icons.account_balance_wallet),
          ),
        ],
      ),
    );
    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '卡片布局'
          ),
        ),
        body: Center(
          child: card,
        ),
      ),
    );
  }
}

卡片布局在卡片的周围有阴影效果