Wigets学习之Flex布局

Flex → display: flex(Css)

创建 Flex 布局

• direction：主轴方向(必填)：Axis.horizontal(横向排列)、Axis.vertical(纵向排列)。如果为Axis.horizontal则需要指定textDirection参数
• mainAxisAlignment：主轴的对齐方式
• mainAxisSize：主轴占用的空间，默认为MainAxisSize.max
• crossAxisAlignment：交叉轴对齐方式
• textDirection：横向文本排列方向
• verticalDirection：垂直方向的文本排列方向
• textBaseline：基线对齐方式

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Flex(
      direction: Axis.vertical,
      textDirection: TextDirection.ltr,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          color: Colors.yellow,
          child: Text('Hello1', textDirection: TextDirection.ltr),
        ),
        Container(
          color: Colors.cyan,
          child: Text('Hello2', textDirection: TextDirection.ltr),
        )
      ],
    );
  }
}

Row

横向布局，和Flex参数direction=Axis.horizontal一样

• children: 子部件
• mainAxisAlignment：主轴的对齐方式
• mainAxisSize：主轴占用的空间，默认为MainAxisSize.max
• crossAxisAlignment：交叉轴对齐方式
• textDirection：横向文本排列方向，需要指定
• verticalDirection：垂直方向的文本排列方向
• textBaseline：基线对齐方式

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      textDirection: TextDirection.ltr,
      children: [
        Container(
          color: Colors.yellow,
          child: Text('Hello1', textDirection: TextDirection.ltr),
        ),
        Container(
          color: Colors.cyan,
          child: Text('Hello2', textDirection: TextDirection.ltr),
        )
      ],
    );
  }
}

Column

纵向布局，和Flex参数direction=Axis.vertical一样

• children: 子部件
• mainAxisAlignment：主轴的对齐方式
• mainAxisSize：主轴占用的空间，默认为MainAxisSize.max
• crossAxisAlignment：交叉轴对齐方式
• textDirection：纵向文本排列方向
• verticalDirection：垂直方向的文本排列方向
• textBaseline：基线对齐方式

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          color: Colors.yellow,
          child: Text('Hello1', textDirection: TextDirection.ltr),
        ),
        Container(
          color: Colors.cyan,
          child: Text('Hello2', textDirection: TextDirection.ltr),
        )
      ],
    );
  }
}

Expanded

用于扩展Flex、Row、Column，使用此部件可以使子部件撑满指定比例

• child：子部件(必填)
• flex：占用比例，默认为 1

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Flex(
      direction: Axis.horizontal,
      textDirection: TextDirection.ltr,
      children: [
        Expanded(
            flex: 2,
            child: Container(
              color: Colors.yellow,
              child: Text('Hello1', textDirection: TextDirection.ltr),
            )),
        Expanded(
            flex: 4,
            child: Container(
              color: Colors.cyan,
              child: Text('Hello2', textDirection: TextDirection.ltr),
            ))
      ],
    );
  }
}