Flutter 限定最大最小宽高布局

Flutter 限定最大最小宽高布局(ConstrainedBox)，ConstrainedBox的作用是限定子元素child的最大宽度、最大高度、最小宽度和最小高度。ConstrainedBox主要属性如下所示：

属性名 类型 说明constraintsBoxConstraints添加到child上的额外限制条件，其类型为BoxConstraints。

BoxConstraints的作用就是限制各种最大最小宽高。childWidget子元素，任意Widget。

接下来我们写一个小示例，示例中在一个宽高为300.0的Container上添加一个约束最大最小宽高的ConstrainedBox，实际显示中，则是一个宽高为220.0的区域。示例代码如下：

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ConstrainedBox限定宽高示例'),
      ),
      // 添加容器
      body: ConstrainedBox(
        // 设置限定值
        constraints: const BoxConstraints(
          minWidth: 150.0,
          minHeight: 150.0,
          maxWidth: 220.0,
              maxHeight: 220.0,
            ),
            // 子容器
            child: Container(
              width: 300.0,
              height: 300.0,
              color: Colors.green,
            ),
          ),
        );
      }
    }

    void main() {
      runApp(
        MaterialApp(
          title: 'ConstrainedBox限定宽高示例',
          home: LayoutDemo(),
        ),
      );
    }

注意 如果child不为null，则将限制条件加在child上。如果child为null，则会尽可能地缩小尺寸。

上述示例代码的视图展现大致如图所示:

酷客教程相关文章：

• Flutter 设置具体尺寸
• Flutter 溢出父容器显示
• Flutter IndexedStack
• Flutter Stack/Positioned