Flutter 限定最大宽高布局

Flutter 限定最大宽高布局（LimitedBox），LimitedBox组件是限制类型的组件，可对最大宽高进行限制。和ConstrainedBox类似，只不过LimitedBox组件没有最小宽高限制。

从布局的角度讲，LimitedBox是将child限制在其设定的最大宽高中的，但这个限定是有条件的。当LimitedBox最大宽度不受限制时，child的宽度就会受到这个最大宽度的限制，高度同理。LimitedBox组件的主要属性如下所示：

接下来我们写一个小示例，添加两个容器，第一个容器宽度为100，高度撑满父容器。第二个容器虽然宽度设置为250，但是由于它的父容器用LimitedBox限定的最大宽度为150，所以它的实际宽度为150，高度也同样撑满父容器。完整的示例代码如下：

import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('LimitedBox限定宽高布局示例'),
        ),
        body: Row(
          children: <Widget>[
              Container(
                color: Colors.grey,
                width: 100.0,
              ),
              LimitedBox(
                maxWidth: 150.0,//设置最大宽度，限定child
在此范围内
                child: Container(
                  color: Colors.lightGreen,
                  width: 250.0,
                ),
              ),
          ],
        )
    );
  }
}
void main() {
  runApp(
    MaterialApp(
      title: 'LimitedBox限定宽高布局示例',
      home: LayoutDemo(),
    ),
  );
}

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

酷客教程相关文章：

• Flutter 限定最大最小宽高布局
• Flutter 设置具体尺寸
• Flutter 溢出父容器显示
• Flutter IndexedStack