亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

Flutter 基礎布局Widgets之Expanded詳解

Expanded概述

Expanded是用于展开RowColumnFlex的子child的Widget。 使用Expanded可以使[Row],[Column]或[Flex]的子项扩展以填充主轴中的可用空间(例如,水平用[Row]或垂直用[Column])。 如果扩展了多个子节点,则根据[flex]因子将可用空间划分为多个子节点。
[Expanded]小部件必须是[Row],[Column]或[Flex]的后代,并且从[Expanded]小部件到其封闭的[Row],[Column]或[Flex]的路径必须包含 只有[StatelessWidget]或[StatefulWidget] s(不是其他类型的小部件,如[RenderObjectWidget])。
使用场景比如在之前的demo中用到的,列表单词和按钮的空白处理,可以利用expanded对各个widgets合理分配弹性空间,而不是用positioned这样的固定widget位置的方式分配,其关键分配参数就是Flex。

构造函数

const Expanded({
    Key key,
    int flex = 1,
     Widget child,
  })
  • flex 分配空间的弹性系数,RowColumnFlex的每个Expanded的flex构成空间分配的比例,默认int flex = 1
  • child 即需要分配的子Widget

示例代码

// expand

import 'package:flutter/material.dart';

class ExpandedLearn extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Expand')
      ),
      body: Row(children: <Widget>[
        // 根据 flex系数,分配剩余空间
        Expanded(
          flex:2,
          child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),

              ),
            )
        ),
        Expanded(
          flex: 1,
          child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                gradient: LinearGradient(colors: [Colors.red, Colors.orange]),

              ),
            )
          )
      ],
    )
    );
  }
}

示例效果

A63D8B78EEDFE82421521740EFBDA185.png

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消