Flutter IntrinsicHeight 自适应组件大小

Posted 2022-08-31 早起的年轻人

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,
          )
        ],
      ),
    );