内容简介: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: <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]), ), ) ) ], ) ); } } 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Flutter布局篇(1)--水平和垂直布局详解
- FlexBox 布局详解
- FlexBox 布局详解
- Android FlexboxLayout 布局详解
- Flutter 完整开发实战详解(十六、详解自定义布局实战)
- 图文详解 Java 对象内存布局
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
perl进阶
Randal L.Schwartz、brian d.foy、Tom Phoenix / 韩雷 / 人民邮电出版社 / 2015-10-1 / 69
本书是Learning Perl一书的进阶。学完本书之后,您可以使用Perl语言的特性编写从简单脚本到大型程序在内的所有程序,正是Perl语言的这些特性使其成为通用的编程语言。本书为读者深入介绍了模块、复杂的数据结构以及面向对象编程等知识。 本书每章的篇幅都短小精悍,读者可以在一到两个小时内读完,每章末尾的练习有助于您巩固在本章所学的知识。如果您已掌握了Learning Perl中的内容并渴......一起来看看 《perl进阶》 这本书的介绍吧!