flutter组件之Expanded

自我理解：

如果你了解android开发的话，这个属性就相当于在LinerLayout子空间中的 layout_weight 属性（布局权重）
使用“Expanded”小部件可使“Row”，“column”或“ Flex”的子级展开以填充主轴上的可用空间（例如，水平放置为“Row”或垂直放置为“Column”）。如果扩展了多个子项，则会根据伸缩因子在可用空间之间进行分配。
[官网api地址]https://api.flutter.dev/flutter/widgets/Expanded-class.html
api说的非常明白，需要自备梯子

上代码（这个例子我自己写的，api中的代码更标准些）

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';class ExpandedDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: SafeArea(child: Container(decoration: BoxDecoration(color: Color.fromRGBO(0, 0, 0, 1)),width: double.infinity,child: Row(children: <Widget>[_MyWidget(),Expanded(//flex 弹性因子，说白了就是当布局中有两个Expanded，可以用这个属性控制他们的大小占比flex: 2,child: _MyWidget2(),),_MyWidget3(),Expanded(flex: 1,child: _MyWidget4(),)],),)),);}
}class _MyWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Container(child: Text('11111'),decoration: BoxDecoration(color: Color.fromRGBO(255, 0, 0, 1)),);}
}class _MyWidget2 extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Container(child: Text('22222'),decoration: BoxDecoration(color: Color.fromRGBO(0, 255, 0, 1)),);}
}class _MyWidget3 extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Container(child: Text('33333'),decoration: BoxDecoration(color: Color.fromRGBO(0, 0, 255, 1)),);}
}class _MyWidget4 extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Container(child: Text('444444'),decoration: BoxDecoration(color: Color.fromRGBO(255, 0, 100, 1)),);}
}

效果图

flutter组件之Expanded相关推荐

【Flutter组件】Expanded详解
Expanded特点只能在Column,Row,Flex以及它们的子组件,这里指的是子组件而不是子结点,是指继承Column,Row,Flex的子组件. Expanded的父结点必须是Column, ...
Flutter组件（Padding，Row，Column，Expanded）
Flutter组件 Padding组件 Row和Column组件 Row(水平展示) Column(垂直展示) Expanded 示例演示 Padding组件 Flutter 中很多 Widget 是 ...
Flutter Widget 之 Expanded（填充布局）
Flutter的Expanded布局与Android布局中weight属性类似,可以设置占满剩余空间. 1. Expanded构造方法: const Expanded({Key key,int fle ...
【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
文章目录一.Flutter 组件简介二.Flutter 自定义 StatelessWidget 组件流程 1.导入父类包 2.选择继承的父类 3.设置成员变量及构造函数 4.重写 build 方法 ...
多图弹出最后变成心形html,【Flutter组件】仿抖音双击点赞弹出爱心效果（可连点）...
效果简介仿抖音点赞手势,单击暂停,双击点赞,可连续点击添加多个爱心,特点如下全部效果为代码绘制(爱心图标来自Material Icon的图标) 套上在目标Widget外即可使用提供单击与点赞的 ...
贝壳团队出品的 Flutter 组件库 Bruno 现已开源
Bruno 是由贝壳「用户体验中心 & 移动端作业组」联合打造的一套企业级移动端 Flutter 组件库,于 12 月 10 日正式开源: 官网 https://bruno.ke.com/ P ...
【Flutter 组件系列第 2 篇】CircularProgressIndicator (圆形进度条组件)
这是[Flutter 组件系列第 2 篇],如果觉得有用的话,欢迎关注专栏. 文章目录一:CircularProgressIndicator 的构造函数二:基本用法三:设置进度具体值四:设置背 ...
Flutter 组件之 Wrap
Flutter 组件之 Wrap 1.简介行和列布局的组件 2.属性 direction: Axis.horizontal主轴方向,决定了子组件纵向布局还是横向 alignment:WrapAlig ...
Flutter 组件之 Flutter高级自定义TabBar（教程含源码）
实战需求 Flutter 组件之 Flutter高级自定义TabBar(教程含源码) 本文价值与收获看完本文后,您将能够作出下面的界面实战代码 import 'package:flutter/ma ...

flutter组件之Expanded

flutter组件之Expanded

自我理解：

上代码（这个例子我自己写的，api中的代码更标准些）

效果图

flutter组件之Expanded相关推荐

最新文章

热门文章