布局规则

Smoothness 2022/11/17 Flutter布局

本文介绍Flutter的布局规则，松约束，紧约束和无约束的规则。

# 确认位置后，按子元素大小显示

补全VSCode快捷键，control + shift + R，光标在需要补全的方法名上按下；

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(build());
}

Widget build() {
  return Center(
    child: Container(
      width: 200,
      height: 100,
      color: Colors.red,
    ),
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 核心规则

上层 widget 向下层 widget 传递约束条件。
下层 widget 向上层 widget 传递大小信息。
上层 widget 决定下层 widget 的位置。

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(_buildScaffold());
}



Widget _buildScaffold() {
  return MaterialApp(
    home: Scaffold(
      body: Column(
        children: const <Widget>[
          Text("aa111aaaa"),
          Text("bb2bbb"),
          Text("cccc"),
        ],
      ),
    )
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 松约束

父元素会等于子元素的最大宽度。

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(buildScaffold());
}

// 松约束
Widget buildScaffold() {
  return MaterialApp(
      home: Scaffold(
    body: Column(
      children: const <Widget>[
        Text("aa111aaaa"),
        Text("bb2bbb"),
        Text("cccc"),
      ],
    ),
  ));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 紧约束

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(tightWidget());
}

Widget tightWidget() {
  return MaterialApp(
    home: Scaffold(
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(
              maxWidth: 30, maxHeight: 30, minWidth: 15, minHeight: 15),
          child: Container(
            color: Colors.amber,
            width: 20,
            height: 20,
          ),
        ),
      ),
    ),
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 无约束

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(noTightWidget());
}

// 无约束UnconstrainedBox
Widget noTightWidget() {
  return MaterialApp(
    home: Scaffold(
      body: Center(
        child: ConstrainedBox(
            constraints: const BoxConstraints(
                maxWidth: 20, maxHeight: 20, minWidth: 15, minHeight: 15),
            child: UnconstrainedBox(
              child: Container(
                color: Colors.amber,
                width: 110,
                height: 110,
              ),
            )),
      ),
    ),
  );
}

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