Flutter Expanded 弹性、自适应、充满剩余

最新推荐文章于 2025-09-22 10:04:10 发布

原创最新推荐文章于 2025-09-22 10:04:10 发布 · 1.1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter Expanded 组件 #Flutter Expanded #Flutter #Flutter自适应

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文详细介绍了Flutter中如何使用Row和Column组件实现水平和垂直方向的自适应布局，通过具体的代码示例展示了不同元素比例分配的方法，适用于各种屏幕尺寸和分辨率。

参数详解

属性	说明
flex	弹性
child	元素

代码示例

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('后自适应'),
        Row(
          children: <Widget>[
            MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/a.jpg'),
            Expanded(
              child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/b.jpg'),
            )
          ]
        ),

        Text('前自适应'),
        Row(
          children: <Widget>[
            Expanded(
              child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/b.jpg'),
            ),
            MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/a.jpg'),
          ]
        ),
        
        Text('1：2 比例'),
        Row(
          children: <Widget>[
            Expanded(
              flex: 1,
              child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/a.jpg'),
            ),
            
            Expanded(
              flex: 2,
              child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/b.jpg'),
            )
          ]
        ),


        Text('2：1 比例'),
        Row(
          children: <Widget>[
            Expanded(
              flex: 2,
              child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/a.jpg'),
            ),
            
            Expanded(
              flex: 1,
              child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/b.jpg'),
            )
          ]
        ),

        Text('1：2：1 比例'),
        Row(
          children: <Widget>[
            Expanded(
              flex: 1,
              child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/a.jpg'),
            ),
            
            Expanded(
              flex: 2,
              child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/b.jpg'),
            ),
            Expanded(
              flex: 1,
              child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/c.jpg'),
            )
          ]
        ),


        Text('2:1:2 比例'),
        Row(
          children: <Widget>[
            Expanded(
              flex: 2,
              child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/a.jpg'),
            ),
            
            Expanded(
              flex: 1,
              child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/b.jpg'),
            ),
            Expanded(
              flex: 2,
              child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/c.jpg'),
            )
          ]
        ),

      ],
    );
  }
}



//定义一个 公共类
class MyImage extends StatelessWidget {
  String imgUrl;
  MyImage(this.imgUrl);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 100,
      child: Image.network(this.imgUrl,fit: BoxFit.cover,),
    );
  }
}

水平布局可以自适应，垂直布局也是一样

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
            MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/a.jpg'),
            Expanded(
              child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/b.jpg'),
            )
          ]
    );
  }
}