Flutter IntrinsicHeight 自适应组件大小

最新推荐文章于 2025-06-30 21:24:45 发布

原创最新推荐文章于 2025-06-30 21:24:45 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

Flutter项目开发全套教程专栏收录该内容

285 篇文章

订阅专栏

本文介绍Flutter中IntrinsicHeight小部件的作用及其在布局调整中的应用案例，通过不同场景展示如何使用IntrinsicHeight来统一子Widget的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 简说

IntrinsicHeight 是Flutter 中的一个 Widget
IntrinsicHeight 是一种根据子 Widget 的固有高度来调整子Widget 尺寸的小部件。

2 Row 中的两个子Widget 无限填充

class InstrinsicPage01 extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("测试"),),
      body: buildRow(),
    );
  }

  buildRow() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          width: 150,
          height: 100,
          color: Colors.teal,
        ),
        Container(
          width: 150,
          height: 200,
          color: Colors.red,
        )
      ],
    );
  }
 }

3 Row 中的两个子Widget 高度为 200

class InstrinsicPage01 extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("测试"),),
      body: buildIns(),
    );
  }
  buildIns() {
    return IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            width: 150,
            height: 100,
            color: Colors.teal,
          ),
          Container(
            width: 150,
            height: 200,
            color: Colors.red,
          )
        ],
      ),
    );
  }
}

4 Row 中的两个子Widget 高度为 400

  buildIns() {
    return SizedBox(
      height: 400,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            width: 150,
            height: 100,
            color: Colors.teal,
          ),
          Container(
            width: 150,
            height: 200,
            color: Colors.red,
          )
        ],
      ),
    );
  }