栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

Flutter 基础布局Widgets之Expanded详解

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Flutter 基础布局Widgets之Expanded详解

Expanded概述

Expanded是用于展开Row,Column或Flex的子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,
    @required Widget child,
  })
  • flex 分配空间的弹性系数,Row,Column或Flex的每个Expanded的flex构成空间分配的比例,默认int flex = 1
  • child 即需要分配的子Widget
示例代码
// expand

import 'package:flutter/material.dart';

class ExpandedLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
 title: Text('Expand')
      ),
      body: Row(children: [
 // 根据 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]),

),
     )
   )
      ],
    )
    );
  }
}
示例效果

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号