Flutter 溢出父容器显示

Flutter 溢出父容器显示(OverflowBox)，通常，子组件无法打破由父组件传递下来的约束条件，但是难免会有子组件的尺寸大于父组件的情况，如何解决呢？在子组件及父组件之间再加入一个OverflowBox组件，那么子组件就不会以父组件为约束条件，而是以OverflowBox组件的属性为约束条件。OverflowBox组件由其minWidth、minHeight、maxWidth、maxHeight四个属性给子组件划定了一个矩形的范围。子组件不能超出OverflowBox组件范围，但是可以溢出父组件范围显示。

OverflowBox组件的主要属性如下所示：

接下来我们写一个例子，添加两个组件：绿色父组件和蓝灰色子组件，子组件会溢出父组件一定范围。如果没有OverflowBox组件，子组件蓝灰色的盒子是不会超出父组件绿色的盒子的。完整的示例代码如下：

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('OverflowBox溢出父容器显示示例'),
        ),
        body: Container(
          color: Colors.green,
          width: 200.0,
          height: 200.0,
          padding: const EdgeInsets.all(50.0),
          child: OverflowBox(
              alignment: Alignment.topLeft,
              maxWidth: 400.0,
              maxHeight: 400.0,
              child: Container(
                color: Colors.blueGrey,
                width: 300.0,
                height: 300.0,
              ),
          ),
        ));
  }
}

void main() {
  runApp(
    MaterialApp(
      title: 'OverflowBox溢出父容器显示示例',
      home: LayoutDemo(),
    ),
  );
}

上述示例代码的视图展现大致如图所示，结果显示出，子组件蓝灰色盒子的范围超出父组件绿色盒子了。

酷客教程相关文章：

• Flutter IndexedStack
• Flutter Stack/Positioned
• Flutter Stack/Alignment
• Flutter 缩放布局