[移动开发]Android学习笔记（五）：Flutter布局

一、Column

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("布局练习"),
      ),
      body: Container(    // 容器包裹Column，给个背景色
        color: Colors.grey,
        child: Column(
          verticalDirection: VerticalDirection.up,    // 倒着排序
          mainAxisSize: MainAxisSize.min,   // 最小尺寸
          crossAxisAlignment: CrossAxisAlignment.end,   // 纵轴排列方案
          mainAxisAlignment: MainAxisAlignment.end,   // 主轴排序方案
          children: [
            Container(
              color: Colors.red,
              height: 100,
              width: 100,
            ),
            Container(
              color: Colors.green,
              height: 200,
              width: 150,
            ),
            Container(
              color: Colors.yellow,
              height: 100,
              width: 100,
            ),
          ],
        ),
      )
    );
  }
}

二、Row同上

三、Flex

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("布局练习"),
      ),
      body: Flex(  // 弹性布局
        direction: Axis.vertical, // 垂直布局
        children: [
          Expanded( // 弹性的。会充满父容器
            child: Container(
              color: Colors.red,
              height: 100,
              width: 200,
            ),
            flex: 1,  // 权重
          ),
          Expanded( // 弹性的。会充满父容器
            child: Container(
              color: Colors.green,
              height: 100,
              width: 200,
            ),
            flex: 2,  // 权重
          ),
          Expanded( // 弹性的。会充满父容器
            child: Container(
              color: Colors.yellow,
              height: 100,
              width: 200,
            ),
            flex: 1,  // 权重
          ),
        ],
      )
    );
  }
}

四、Wrap

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("布局练习"),
      ),
      body: Container(
        child: WrapDemo(),
      )
    );
  }
}

class ErrorDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text("data" * 200) // 会超出屏幕，报错；使用最大一行或者流式布局解决
      ],
    );
  }
}

class WrapDemo extends StatefulWidget {
  @override
  _WrapDemoState createState() => _WrapDemoState();
}

class _WrapDemoState extends State<WrapDemo> {
  List<int> list = [];
  @override
  void initState() {
    super.initState();
    for(int i = 0; i < 200; ++i) {
      list.add(i);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      direction: Axis.vertical,   // 垂直排列
      alignment: WrapAlignment.end,   // 从结尾开始排列
      spacing: 1,  //每个 children 间，增加间隔
      runSpacing: 1,
      children: list.map((e) => Container(
        height: 10,
        width: 10,
        child: Text(e.toString()),
        color: Colors.blue,
      )).toList(),
    );
  }
}

五、Stack

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("布局练习"),
      ),
      body: Container(
        width: double.infinity,
        color: Colors.grey,
        child: StackDemo(),
      )
    );
  }
}

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: AlignmentDirectional.topEnd,
      children: [
        Container(
          color: Colors.green,
          height: 100,
          width: 100,
        ),
        Container(   // 会覆盖前一个child
          color: Colors.red,
          height: 50,	// Stack的child不设置宽高，默认占满全屏
          width: 50,
        ),
      ],
    );
  }
}

六、Positioned

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("布局练习"),
      ),
      body: Container(
        width: double.infinity,
        color: Colors.grey,
        child: StackDemo(),
      )
    );
  }
}

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: AlignmentDirectional.topEnd,
      children: [
        Container(
          color: Colors.green,
          height: 100,
          width: 100,
        ),
        Container(   // 会覆盖前一个child
          color: Colors.red,
          height: 50, // Stack的child不设置宽高，默认占满全屏
          width: 50,
        ),
        Positioned(
          top: 10,
          bottom: 20,
          left: 30,
          right: 40,
          child: Container(
            color: Colors.yellow,
            height: 50, // 宽高可能会没用
            width: 50,
          )
        )
      ],
    );
  }
}

七、Align

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("布局练习"),
      ),
      body: Container(
        color: Colors.grey,
        child: AlignDemo()
      )
    );
  }
}

class AlignDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 100,
      width: 100,
      child: Align(
        alignment: Alignment(-1, 0.5),
        child: Container(
          color: Colors.green,
          width: 20,
          height: 20,
        ),
      ),
    );
  }
}