Flutter——Wrap组件(流式布局)
属性 | 说明 |
direction
|
主轴的方向,默认水平
|
alignment
|
主轴的对其方式
|
spacing
|
主轴方向上的间距
|
textDirection
|
文本方向
|
verticalDirection
|
定义了 children 摆放顺序,默认是 down,见Flex组件相关属性介绍。
|
runAlignment
|
run 的对齐方式。run 可以理解为新的行或者列,如果是水平方向布局的话,run 可以理解为新的一行
|
runSpacing
|
run 的间距
|
import 'package:flutter/material.dart';
import 'res/listData.dart'; void main() {
runApp(MaterialApp(
title: "WrapWidget",
home: MyApp(),
));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body:Wrap(
spacing: 10.0,
alignment: WrapAlignment.spaceEvenly,
runSpacing: 10.0,
children: <Widget>[
MyButton("第1集"),
MyButton("第2集第2集"),
MyButton("第3集"),
MyButton("第4集第4集"),
MyButton("第5集"),
MyButton("第6集"),
MyButton("第7集"),
MyButton("第8集第8集第8集"),
MyButton("第9集"),
],
)
);
}
} class MyButton extends StatelessWidget {
final String text;
MyButton(this.text); @override
Widget build(BuildContext context) {
return RaisedButton(
child: Text(this.text),
textColor: Theme.of(context).accentColor,
onPressed: (){},
);
} }
Flutter——Wrap组件(流式布局)的更多相关文章
- Flutter 流式布局列表实例+上拉加载
页面变化的几种方式: 一.StatefulWidget的setState形式 先声明两个变量. ; List<Map> list = []; 写了一个方法,获取数据: void _getH ...
- Flutter 布局类组件:流式布局(Wrap和Flow)
前言 把超出屏幕显示范围会自动折行的布局称为流式布局.Flutter中通过Wrap和Flow来支持流式布局,将Row换成Wrap后溢出部分则会自动折行. Wrap 接口描述 Wrap({ Key ke ...
- 20个Flutter实例视频教程-第12节: 流式布局 模拟添加照片效果
视频地址: https://www.bilibili.com/video/av39709290/?p=12 博客地址: https://jspang.com/post/flutterDemo.html ...
- JAVA 流式布局管理器
//流式布局管理器 import java.awt.*; import javax.swing.*; public class Jiemian2 extends JFrame{ //定义组件 JBut ...
- 转:Java图形化界面设计——布局管理器之FlowLayout(流式布局)其他请参考转载出处网址
http://blog.csdn.net/liujun13579/article/details/7771191 前文讲解了JFrame.JPanel,其中已经涉及到了空布局的使用.Java虽然可以以 ...
- Java图形化界面设计——布局管理器之FlowLayout(流式布局)
一.布局管理器所属类包 所属类包 布局管理器名称 说明 Java.awt FlowLayout(流式布局) 组件按照加入的先后顺序按照设置的对齐方式从左向右排列,一行排满到下一行开始继续排列 Bord ...
- RecyclerFlexboxLayoutManagerDemo【使用FlexboxLayoutManager实现流式布局】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 FlexboxLayout是一个Google 开源的库项目,它将CSS Flexible Box Layout Module的类似功 ...
- 03 Java图形化界面设计——布局管理器之FlowLayout(流式布局)
前文讲解了JFrame.JPanel,其中已经涉及到了空布局的使用.Java 虽然可以以像素为单位对组件进行精确的定位,但是其在不同的系统中将会有一定的显示差异,使得显示效果不尽相同,为此java提供 ...
- 含有过滤功能的android流式布局
FilterFlowLayout 含有过滤功能的流式布局, 參考FlowLayout 能够去除宽度不在范围(比例或真实值)内的子view 能够设置最大行数 能够加入组件间水平间距 能够加入行间距 系统 ...
- 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局
高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...
随机推荐
- linux常用的命令和工具
screen 管理会话工具 与之相似的工具还有tmux # screen // 进入一个回话 .还可以给会话取名 screen -S modify_screen #vim screen.txt ...
- XMemcached的基本使用
XMemcached是memcached的一个java客户端,基于java nio,支持memcached的所有协议.本文简要介绍XMemcached的基本使用. 一.添加依赖 <depende ...
- Zookeeper学习之Watcher事件类型和ZK状态
1.Zookeepe Watcherr的事件类型和ZK状态. zookeeper:Watcher.ZK状态,事件类型(一)zookeeper有watch事件,是一次性触发的,当watch监视的数据发 ...
- 26.Spark创建RDD集合
打开eclipse创建maven项目 pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:x ...
- spring-cloud项目搭建
springCloud项目搭建手册 springcloud应用场景及微服务框架发展趋势 Spring Cloud为开发人员提供了工具,以快速构建分布式系统中的某些常见模式(例如,配置管理,服务发现,断 ...
- Excel时间序列函数
year 返回对应于某个日期的年份. month 返回对应于某个日期的月份. day 返回对应于某个日期的年份. weekday 返回对应于某个日期的天数. weeknum 返回对应日期在本年中是第几 ...
- c语言 运算器
#include<stdio.h> #include<stdbool.h> void menu(){ printf("************************ ...
- 『Linux』第一节: 部署虚拟环境
一. 准备工具 1. VMware Workstation Pro下载 1.1 VMware Workstation Pro 激活许可证 UY758-0RXEQ-M81WP-8ZM7Z-Y3HDA V ...
- Mongo DB分片
分片,指的就是把数据拆分,将其分散到不同机器上的过程.MongoDB支持自动分片,对应用而言,好像始终和一个单机的服务器交互一样. 分片和复制复制是让多台服务器拥有相同的数据副本,而分片是每个分片都拥 ...
- redis键的迁移操作
1.redis单个实例内多库间的数据迁移操作 命令名称:move 语法:move key db 功能:将当前数据库的key移动到给定的数据库db当中.如果当前数据库(源数据库)和给定数据库(目标数据库 ...