Expanded 组件

清疚 2021-09-13 15:40 416阅读 0赞

**一、参数说明：**  
Expanded 可以用在 Row 和 Column 布局中

flex: 元素占整个父 Row /Column 的比例
    
    child: 子元素

**二、代码示例：**

import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
            home: Scaffold(
          appBar: AppBar(title: Text('FlutterDemo')),
          body: LayoutDemo(),
        ));
      }
    }
    
    class LayoutDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Column(
          children: <Widget>[
    
            Row(
              children: <Widget>[
                Expanded(
                  child:   Container(
                    height: 180,
                    color: Colors.black,
                    child: Text('你好Flutter'),
                  ),
                )
              ],
            ),
            SizedBox(height: 10),
            Row(
              children: <Widget>[
                Expanded(
                  flex: 2,
                  child: Container(
                    height: 180,
                    child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover),
                  )
                ),
                SizedBox(width: 10),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 180,
                    child: ListView(
                      children: <Widget>[
                        Container(
                          height: 85,
                          child: Image.network("https://www.itying.com/images/flutter/3.png",fit: BoxFit.cover),
    
                        ),
                        SizedBox(height: 10),
                        Container(
                          height: 85,
                          child: Image.network("https://www.itying.com/images/flutter/4.png",fit: BoxFit.cover),
                        )
                      ],
                    )
                  )
                ),
    
              ],
            )
          ],
        );
      }
    }

**运行效果如下图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hzal9ibG9n_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hzal9ibG9n_size_16_color_FFFFFF_t_70]: /images/20210913/45260d57969e40fb92185d6181eb2b34.png