Flutter开发中如何隐藏固定尺寸Container内超出边界的内容

问题原因 #

• SizedOverflowBox组件的作用就是允许子元素突破父组件的尺寸限制、溢出显示，用它自然无法实现裁剪超出内容的需求
• Container默认不开启裁剪逻辑，就算设置了固定宽高，子元素溢出时也不会自动隐藏

方案1：直接给Container配置裁剪属性（最简单） #

不需要额外嵌套组件，仅需给外层Container补两个配置即可：

1. 配置clipBehavior参数指定裁剪规则：常用Clip.hardEdge（裁剪性能最高，无抗锯齿）、Clip.antiAlias（带抗锯齿，边缘更平滑）
2. 给Container加color/decoration属性：Container只有配置了这两个参数之一时，裁剪逻辑才会生效

修正后完整代码：

import 'package:flutter/material.dart';

main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('A draggable card!'),
      ),
      body: Container(
        height: 100,
        width: 200,
        // 加背景色保证裁剪生效
        color: Colors.white,
        // 开启裁剪
        clipBehavior: Clip.hardEdge,
        child: Column(
          children: [
            Text("Hello World"),
            Text("Hello World"),
            Text("Hello World"),
            Text("Hello World"),
            Text("Hello World"),
            Text("Hello World"),
            Text("Hello World"),
            Text("Hello World"),
            Text("Hello World"),
            Text("Hello World"),
            Text("Hello World"),
            Text("Hello World"),
            Text("Hello World"),
            Text("Hello World"),
            Text("Hello World")
          ],
        ),
      ),
    );
  }
}

方案2：用ClipRect包裹要裁剪的内容 #

如果你不想修改外层Container的配置，直接把你原来用的SizedOverflowBox替换为ClipRect即可，ClipRect会自动裁剪超出父组件边界的内容：

body: Container(
  height: 100,
  width: 200,
  child: ClipRect(
    child: Column(
      // 原有子元素保持不变
    ),
  ),
)

补充说明 #

如果需要查看超出边界的内容，可以在裁剪组件内嵌套SingleChildScrollView，就能实现固定区域内滚动查看内容的效果。

内容的提问来源于stack exchange，提问作者Axel