/*
Flutter页面布局Wrap组件:
Wrap可以实现流布局,单行的Wrap跟Row表现几乎一致,单列的Wrap则跟Row表现几乎一致。
但Row与Column都是单行单列的。Wrap则突破了这个限制。mainAxis上空间不足时,则向crossAxis上去扩展展示。
direction 主轴的方向,默认水平。
alignment 主轴的对齐方式
spacing 主轴方向上的间距
textDirection 文本方向
verticalDirection 定义了children摆放顺序,默认是down,见Flex相关属性。
runAlignment run的对齐方式,run可以理解为新的行或者列,如果是水平布局的话,run
可以理解为新的一行
runSpacing run的间距 */

main.dart

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Wrap组件:'),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
//Stack结合align实现布局:
return Container(
height: ,
width: ,
color: Colors.pink,
child: Wrap(
spacing: ,
runSpacing: ,
// direction: Axis.vertical,
// alignment: WrapAlignment.start,
runAlignment: WrapAlignment.center,
children: <Widget>[
MyButton("第一章"),
MyButton("第一章"),
MyButton("第一章"),
MyButton("第一章"),
MyButton("第一章"),
MyButton("第一章"),
MyButton("第一章"),
MyButton("第一章"),
MyButton("第一章"),
MyButton("第一章"),
MyButton("第一章"),
MyButton("第一章"),
MyButton("第一章")
],
));
}
} class MyButton extends StatelessWidget {
final String text; const MyButton(this.text, {Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return RaisedButton(
child: Text(this.text),
textColor: Theme.of(context).accentColor,
onPressed: () {},
);
}
}

13Flutter页面布局 Wrap组件的更多相关文章

  1. 页面布局 Wrap 组件 和 RaisedButton按钮

    一.RaisedButton 定义一个按钮 Flutter 中通过 RaisedButton 定义一个按钮.RaisedButton 里面有很多的参数,只讲简单的进行使用. return Raised ...

  2. 常用到的html页面布局和组件: 自己用

    1. 用div当作圆 <div style="border: 1px solid blue;height: 100px; width: 100px; border-radius: 20 ...

  3. 046——VUE中组件之使用动态组件灵活设置页面布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Flutter——Wrap组件(流式布局)

    Wrap 可以实现流布局,单行的 Wrap 跟 Row 表现几乎一致,单列的 Wrap 则跟 Row 表现几乎一致.但 Row 与 Column 都是单行单列的,Wrap 则突破了这个限制,mainA ...

  5. 11Flutter页面布局 Stack层叠组件 Stack与Align Stack与Positioned实现定位布局

    /* Flutter 页面布局 Stack层叠组件: Stack与Align Stack与Positioned实现定位布局: Flutter Stack组件: Stack表示堆得意思,我们可以用Sta ...

  6. 10Flutter页面布局 Padding Row Column Expanded组件详解:

    Padding组件: main.dart import 'package:flutter/material.dart'; import 'res/listData.dart'; /* flutter页 ...

  7. 【Flutter学习】页面布局之基础布局组件

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  8. 《React后台管理系统实战 :二》antd左导航:cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱

    一.admin页面布局及路由创建 0)cmd批量创建目录及子目录 //创建各个目录,及charts和子目录bar md home category product role user charts\b ...

  9. Flutter 布局类组件:流式布局(Wrap和Flow)

    前言 把超出屏幕显示范围会自动折行的布局称为流式布局.Flutter中通过Wrap和Flow来支持流式布局,将Row换成Wrap后溢出部分则会自动折行. Wrap 接口描述 Wrap({ Key ke ...

随机推荐

  1. Java学习第一天之简单了解java语言及开发环境的安装

    一.初步了解Java语言 Java语言是由Sun公司的James Gosling创造的一门面向对象的高级语言. 2009年4月20日,Sun公司被Oracle以总价值约为74亿美元的价格收购,Java ...

  2. 07 Windows编程——窗口滚动条

    两个函数:GetScrolnfo和SetScrollnfo一个结构:SCROLLINFO两个消息:WM_CREATE和WM_SIZE 滚动条结构体 typedef struct tagSCROLLIN ...

  3. DNS zone file

    zone file格式最初由Berkeley Internet Name Domain(BIND)软件包使用,但已被其他DNS server software广泛采用.它们中的一些(例如NSD,Pow ...

  4. c语言二维数组赋值

    , n=;//行数和列数 pattern = (char**)malloc(sizeof(char*)*m);//申请一组一维指针空间. ; i<m; i++) pattern[i] = (ch ...

  5. *p 和p[i] 区别

    注意:*(arr+ n -1)指向的 是原来&a[n-1]是个地址 与arr[n-1]不同 !!重点!

  6. Linux下zookeeper集群搭建

    Linux下zookeeper集群搭建 部署前准备 下载zookeeper的安装包 http://zookeeper.apache.org/releases.html 我下载的版本是zookeeper ...

  7. Springboot项目中的favicon

    当项目还不大的时候,打开浏览器的favicon是自带的小叶子,如下图 此时,我们只需要将我们想要的favicon命令为favicon.ico放置在resource下,重启服务即可改变图标 当项目越来越 ...

  8. PAT Basic 1070 结绳 (25 分)

    给定一段一段的绳子,你需要把它们串成一条绳.每次串连的时候,是把两段绳子对折,再如下图所示套接在一起.这样得到的绳子又被当成是另一段绳子,可以再次对折去跟另一段绳子串连.每次串连后,原来两段绳子的长度 ...

  9. PAT Basic 1053 住房空置率 (20 分)

    在不打扰居民的前提下,统计住房空置率的一种方法是根据每户用电量的连续变化规律进行判断.判断方法如下: 在观察期内,若存在超过一半的日子用电量低于某给定的阈值 e,则该住房为“可能空置”: 若观察期超过 ...

  10. webpack中环境变量的使用方法

    这节课讲解一下,在webpack打包过程中,怎么去使用一些环境变量. 首先我有一个打包配置的三个文件 "scripts": { "dev-build": &qu ...