笔录Flutter（五）布局系列：Row、Column、Flex、Expanded 常用属性、使用

Flutter练习demo

Row、Column常用属性

1. 线性布局有主轴和纵轴之分，如果布局是沿水平方向，那么主轴就是指水平方向，而纵轴即垂直方向；如果布局沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向
2. 线性布局中，有两个定义对齐方式的枚举类MainAxisAlignment和CrossAxisAlignment，分别代表主轴对齐和纵轴对齐
   
   Row和Column 参数一样，不同的是布局方向为垂直，主轴纵轴正好相反，读者可类比Row来理解，在此不再赘述。
   Row源码：
   
   Column源码：
   

弹性布局（Flex、Expanded）

弹性布局介绍

1. 弹性布局允许子widget按照一定比例来分配父容器空间
2. Flutter中的弹性布局主要通过Flex和Expanded来配合实现。

Flex介绍

1. Flex可以沿着水平或垂直方向排列子widget
2. Row和Column都继承自Flex，参数基本相同，所以能使用Flex的地方一定可以使用Row或Column
3. 如果你知道主轴方向，使用Row或Column会方便一些
4. 可以用Flex和Expanded来配合实现弹性布局

Expanded

可以按比例“扩伸”Row、Column和Flex子widget所占用的空间。

flex为弹性系数，如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间。如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间

  const Expanded({
   
    int flex = 1,
    @required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);

使用

效果图：

效果图完整代码：

import 'dart:io';

import 'package:flutter/material.dart';

class LayoutRow extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Layout"),
        ),
        body: GridView.builder(
          itemCount: 10,
          itemBuilder: _getWidget,
          padding: EdgeInsets.all(10),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              childAspectRatio: 0.7),
        ),
      ),
    );
  }
}

BoxDecoration _decoration = new BoxDecoration(
  color: Color(0x66e22eee),
  borderRadius: BorderRadius.circular(5),
);

/**
 * 根据下标index 区分返回不同的widget
 * */
Widget _getWidget(BuildContext c, int index) {
  if (index == 0) {
    return Container(
      decoration: _decoration,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(left: 10, right: 10),
            child: ClipOval(
              child: Image.asset(
                "images/s.jpg",
                width: 70,
                height: 70,
                fit: BoxFit.cover,
              ),
            ),
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                "姓名",
                style: TextStyle(fontSize: 18),
              ),
              Text(
                "个人资料",
                style: TextStyle(fontSize: 15),
              ),
            ],
          ),
        ],
      ),
    );
  } else if (index == 1) {
    return Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          image: DecorationImage(
              image: AssetImage("images/z.jpg"), fit: BoxFit.cover),
        ),
        alignment: Alignment.bottomCenter,
        child: _Container("Like小丑女,点赞"));
  } else if (index == 2) {
    return Container(
      decoration: _decoration,
      child: Column(
        children: <Widget>[
          Container(
            width: double.infinity,
            height: 40,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(5), topLeft: Radius.circular(5)),
              image: DecorationImage(
                  image: AssetImage(
                    "images/z.jpg",
                  ),
                  fit: BoxFit.cover),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 10),
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(left: 10),
              ),
              Image.asset(
                "images/z.jpg",
                width: 60,
                height: 60,
                fit: BoxFit.cover,
              ),
              Padding(
                padding: EdgeInsets.only(left: 10),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Image.asset(
                      "images/z.jpg",
                      width: 100,
                      height: 25,
                      fit: BoxFit.cover,
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 10),
                    ),
                    Image.asset(
                      "images/z.jpg",
                      width: 100,
                      height: 25,
                      fit: BoxFit.cover,
                    ),
                  ],
                ),
              ),
            ],
          ),
          Expanded(
            //可以按比例“扩伸”Row、Column和Flex子widget所占用的空间。
            // 这里把剩余的控件占满了
            child: Container(
              alignment: Alignment.bottomCenter,
              child: _Container("哈利奎因 点赞"),
            ),
          )
        ],
      ),
    );
  } else if (index == 3) {
    return Container(
      decoration: _decoration,
      child: Column(
        children: <Widget>[
          // ——————————弹性布局
          Flex(
            direction: Axis.horizontal,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.cyan,
                      borderRadius:
                          BorderRadius.only(topLeft: Radius.circular(5))),
                  height: 20,
                ),
              ),
              Expanded(
                flex: 2,
                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius:
                          BorderRadius.only(topRight: Radius.circular(5))),
                  height: 20,
                ),
              ),
            ],
          ),
          Expanded(
            child: Container(
              alignment: Alignment.bottomCenter,
              child: _Container("Flex+Expanded"),
            ),
          )
        ],
      ),
    );
  } else {
    return Container(
      child: Text("List=$index"),
      width: 100,
      height: 100,
      color: Colors.cyan,
    );
  }
}

/**
 * 半透明背景+点赞
 * */
Widget _Container(String dec) {
  return Container(
    decoration: BoxDecoration(
        color: Color(0x66000000), borderRadius: BorderRadius.circular(5)),
    width: double.infinity,
    height: 40,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Image.asset(
          "images/like.png",
          width: 20,
          height: 20,
        ),
        Padding(
          padding: EdgeInsets.only(left: 5),
          child: Text(
            dec,
            style: TextStyle(color: Colors.white),
          ),
        ),
      ],
    ),
  );
}