【笔记】Flutter的Expanded弹性布局组件

发表于 更新于 分类于 阅读次数：

前言

Flutter的Expanded弹性布局组件学习笔记

Expanded弹性布局组件

通过Row组件嵌套Expanded

flex：当前元素所占的比例
child：子元素，如果设置了flex，则子元素的宽度没有效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: const App(),
    ),
  ));
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return const Row(
      children: [
        Expanded(
            flex: 1,
            child: Icon(Icons.home)
        ),
        Expanded(
            flex: 1,
            child: Icon(Icons.home)
        )
      ],
    );
  }
}

通过Column组件嵌套Expanded

flex：当前元素所占的比例，flex属性必须在child属性的前面定义
child：子元素，如果设置了flex，则子元素的高度没有效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: const App(),
    ),
  ));
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        Expanded(
            flex: 1,
            child: Icon(Icons.home)
        ),
        Expanded(
            flex: 1,
            child: Icon(Icons.home)
        )
      ],
    );
  }
}

通过Flex组件嵌套Expanded

direction：Flex组件必须通过direction属性定义横向还是纵向

Axis.horizontal：横向
Axis.vertical：纵向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: const App(),
    ),
  ));
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return const Flex(
      direction: Axis.horizontal,
      children: [
        Expanded(
            flex: 1,
            child: Icon(Icons.home)
        ),
        Expanded(
            flex: 1,
            child: Icon(Icons.home)
        )
      ],
    );
  }
}

完成

参考文献

哔哩哔哩——筱筱知晓