Flutter IntrinsicHeight 自适应组件大小

傷城~ 2023-10-07 19:36 5阅读 0赞

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