- 1、本文档共7页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
Flutter 布局 Widget —— 流式
布局
流式布局:⻚⾯元素的宽度可以按照屏幕分辨率进⾏适配调整,但整
体布局不 。
在 Flutter 中的流式布局是:
Wrap (https://docs.flutter.io/flutter/widgets/Wrap-
class.html)
为什么需要流式布局?
前⾯讲到的,在 Flex、Row 、Column 中,当 ⼦Widget 的⼤
⼩超过 主轴的⼤⼩后,就会报 layout 的 o erflowed 错误 ,
会在界⾯上看到⻩⿊⾊的条。
这个问题也可以⽤流式布局解决,将上⾯代码的 Row 换成 Wrap:
import package:flutter/material.dart;
main() {
runApp(new MyApp());
}
class MyApp e tends StatelessWidget {
@override
Widget build(BuildConte t conte t) {
return new MaterialApp(
title: Test,
home: new Scaffold(
appBar: new AppBar(title: new
Te t(Flutter 布局Widget -- 流式布局)),
body : Wrap(
children: Widget[Te t(Hello
Flutter * 100)],
)));
}
}
运⾏后的效果就为:
Wrap
Wrap 会把超出屏幕显示范围的 Widget ⾃动换⾏,所以称为流式布
局。
代码所在位置
flutter_widget_demo/lib/wrap/WrapWidget.dart
Wrap 的快速上⼿
Wrap 需要设置主轴⽅向,默认的主轴⽅向为⽔平⽅向,给其
children 参数添加 ⼦Widget 即可,例如:
Wrap(
direction: A is.horizontal,
children: Widget[
...
]
)
Wrap 在⼀个⻚⾯使⽤的完整 Demo 如下:
import package:flutter/material.dart;
main() = runApp(new WrapWidget());
class WrapWidget e tends StatelessWidget {
@override
Widget build(BuildConte t conte t) {
return new MaterialApp(
title: Test,
home: new Scaffold(
appBar: new AppBar(title: new
Te t(Flutter 布局Widget -- 流式布局)),
body : Wrap(
direction: A is.horizontal,
spacing: 8.0, // 主轴 ⽅向间距
runSpacing: 12.0, // 交叉轴 ⽅向间距
alignment: WrapAlignment.center,
runAlignment: WrapAlignment.start,
children: Widget[
new Chip(
avatar: new CircleAvatar(
backgroundColor:
Colors.blue, child: Te t(A )),
label: new Te t(AAAAAAAA ),
),
new Chip(
avatar: new CircleAvatar(
background
您可能关注的文档
- 信息架构作业——Della伶俐.pdf
- BRC_超赞渣打银行面试经验.pdf
- Git三剑客-Git常见命令速查表.pdf
- 五、K3 Cloud实施初始化——系统工具篇.pdf
- BRC_高盛面试指南.pdf
- 3搭建 Flutter 开发环境.pdf
- 按键检测例程说明文档.pdf
- 01-为什么要学习算法与数据结构.pdf
- BRC_中信建投校园招聘面试经验1.pdf
- BRC_中信建投校园招聘面试经验3.pdf
- 四川省德阳市罗江中学2025届高三考前热身化学试卷含解析.doc
- 山东省枣庄现代实验学校2025届高三下学期第五次调研考试化学试题含解析.doc
- 吉林省长春市十一高中等九校教育联盟2025届高三一诊考试生物试卷含解析.doc
- 2025届江苏省盐城市伍佑中学高考仿真模拟化学试卷含解析.doc
- 2025届广西贺州中学高考冲刺押题(最后一卷)生物试卷含解析.doc
- 安徽省池州市贵池区2025届高三第一次模拟考试生物试卷含解析.doc
- 宁夏银川一中2025届高三(最后冲刺)化学试卷含解析.doc
- 广东省广州市增城区四校联考2025届高考压轴卷化学试卷含解析.doc
- 2025届邯郸市第一中学高考生物必刷试卷含解析.doc
- 2025届安徽省安庆市石化第一中学高考仿真卷化学试卷含解析.doc
文档评论(0)