简介

一个用于撑开 flex 布局子组件空间的widget

用于在Row、Column、Flex子组件内
会沾满所有可用空间

基本用法

以下示例对比使用 Expanded

使用Expanded 可以使 Row、Column或者Flex的子项能够填充主轴的全部可用空间
如果存在多个子项，则根据 flex 属性来划分可用空间
Expanded widget 必须是Row,Column或者Flex的后代

实例演示

import 'package:flutter/material.dart';

class ExpandedDemo extends StatelessWidget {

  final TextStyle txtColor = TextStyle(color: Colors.white);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('Expanded'),
         Row(children: <Widget>[
           RaisedButton(
            onPressed: () {
              print('点击红色按钮事件');
            },
            color: const Color(0xffcc0000),
            child:  Text('红色按钮',style: txtColor,),
          ),
           Expanded(
            flex: 1,//flex用来设置当前可用空间的占优比
            child:  RaisedButton(
              onPressed: () {
                print('点击黄色按钮事件');
              },
              color: const Color(0xfff1c232),
              child:  Text('黄色按钮',style: txtColor,),
            ),
          ),
           RaisedButton(
            onPressed: () {
              print('点击粉色按钮事件');
            },
            color: const Color(0xffea9999),
            child:  Text('粉色按钮',style: txtColor,),
          ),
        ]),
        Text('Flexible'),
         Row(children: <Widget>[
           RaisedButton(
            onPressed: () {
              print('点击红色按钮事件');
            },
            color: const Color(0xffcc0000),
            child:  Text('红色按钮',style: txtColor,),
          ),
           Flexible(
            flex: 1,
            child:  RaisedButton(
              onPressed: () {
                print('点击黄色按钮事件');
              },
              color: const Color(0xfff1c232),
              child:  Text('黄色按钮',style: txtColor,),
            ),
          ),
           RaisedButton(
            onPressed: () {
              print('点击粉色按钮事件');
            },
            color: const Color(0xffea9999),
            child:  Text('粉色按钮',style: txtColor,),
          ),
        ]),
      ],
    );
  }
}