Flutter | ConstrainedBox & UnconstrainedBox 组件

最新推荐文章于 2024-08-07 15:33:27 发布

Flutter 笔记

最新推荐文章于 2024-08-07 15:33:27 发布

阅读量1.7k

点赞数

文章标签： flutter javascript 前端开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_23756803/article/details/103471209

版权

本文介绍了Flutter中的ConstrainedBox和UnconstrainedBox组件，讲解了它们在控制子组件尺寸上的作用。ConstrainedBox用于给子组件添加额外约束，如设置最小高度。而UnconstrainedBox则允许子组件按其自然大小渲染，不受约束。在解决布局约束问题时，了解这两个组件非常有用。

摘要由CSDN通过智能技术生成

0. 前言

在 Flutter 当中，我们如何控制组件的大小？套上一层 Container？SizeBox？还是一些别的技巧？

有没有同学遇到这种情况：在布局中，无论如何都控制不了一个组件的大小，烦的一批？

例如这段代码：

Widget build(BuildContext context) {
  return Scaffold(
    body: ListView.separated(itemBuilder: (context, index){
      return Container(
        height: 200,
        width: 200,
        color: Colors.amber,
      );
    }, itemCount: 10, separatorBuilder: (BuildContext context, int index) {
      return Container(height: 10,);
    },),
  );
}

我创建了一个ListView，每一个 item 是一个 200*200 的琥铂色（黄色）Container，讲道理，这个时候我们的脑海里就应该有这样的一个列表呈现。然而，当你运行的时候：