布局约束

布局约束.png

Flutter 中有两种布局模型:

• 基于 RenderBox 的盒模型布局。
• 基于 Sliver 的按需加载列表布局。

任何时候子组件都必须先遵守父组件的约束，UnconstrainedBox "移除"父组件限制的并非是真正的"移除",只不过它不影响最终子组件的大小，但仍然占据相应的空间。如果使用UnconstrainedBox后，子组件的大小超过它父组件约束时，也会导致溢出报错。

SizedBox：指定尺寸的容器。
DecoratedBox：带装饰的容器。
RotatedBox：旋转一定角度的容器。
ConstaintedBox：带约束条件的容器。

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: LayoutWidget(),
  ));
}

class LayoutWidget extends StatefulWidget {
  const LayoutWidget({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _LayoutState();
}

class _LayoutState extends State<LayoutWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('布局约束'),
        ),
        body: Column(children: [
          //用于对子组件添加额外的约束
          ConstrainedBox(
            constraints: const BoxConstraints(
                minWidth: double.infinity, //宽度尽可能大
                maxHeight: 20.0 //最大高度为20像素
                ),
            child: const SizedBox(
              //受到约束无效
              height: 60.0,
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.red),
              ),
            ),
          ),
          const Divider(
            height: 10,
            color: Colors.blue,
          ),
          //使用SizedBox规定子组件大小
          SizedBox(
            width: 100, //最小最大宽度100
            height: 100, //最小最大高度100
            child: Container(
              width: 1,
              height: 1,
              decoration: const BoxDecoration(
                color: Colors.blue,
                //设置背景
                image: DecorationImage(
                    image: NetworkImage(
                        "https://upload.jianshu.io/admin_banners/web_images/5055/348f9e194f4062a17f587e2963b7feb0b0a5a982.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"),
                    fit: BoxFit.cover),
              ),
            ),
          ),
          ConstrainedBox(
            constraints:
                const BoxConstraints(minWidth: 160.0, minHeight: 160.0),
            child: UnconstrainedBox(
                //"移除"父级限制
                child: Container(
              width: 10,
              height: 10,
              decoration: const BoxDecoration(color: Colors.green),
            )),
          )
        ]));
  }
}