博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Flutter 基础布局Widgets之Expanded详解
阅读量:7055 次
发布时间:2019-06-28

本文共 1553 字,大约阅读时间需要 5 分钟。

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,    @required Widget child,  })复制代码
  • flex 分配空间的弹性系数,RowColumnFlex的每个Expanded的flex构成空间分配的比例,默认int flex = 1
  • child 即需要分配的子Widget

示例代码

// expandimport '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]), ), ) ) ], ) ); }}复制代码

示例效果

转载于:https://juejin.im/post/5ccef90d6fb9a03217283221

你可能感兴趣的文章
iftop流量监控使用
查看>>
自动化运维工具(四)之 (虚拟主机)
查看>>
Linux分区
查看>>
Slider Revolution实现幻灯片
查看>>
bootstrap提供了六种列表效果
查看>>
LAMP+LogAnalyzer日志服务器环境搭建
查看>>
split、replace、indexof、substr 用法 (获取后台富文本框内容,截取图片)
查看>>
怎样在 ubuntu 上安装 Linux 3.11 内核
查看>>
php 字符串分割函数split
查看>>
Bex5自动编号相关函数和用法
查看>>
机柜就是数据中心
查看>>
详解NetAppFAS3220数据恢复操作方法
查看>>
容器与依赖注入
查看>>
老男孩Linux运维决心书
查看>>
VIM常用快捷键
查看>>
网络交换机对无线网络中安全威胁的防御和缓解
查看>>
我的友情链接
查看>>
版权之争,谁更棋高一着?
查看>>
通过Nginx架设灵活的网站静态化方案
查看>>
我的友情链接
查看>>