页面布局 Wrap 组件
一、Flutter RaisedButton 定义一个按钮
Flutter 中通过 RaisedButton 定义一个按钮。RaisedButton 里面有很多的参数,这一讲我们只是简单的进行使用。
return RaisedButton(
child: Text('女装'),
textColor: Theme.of(context).accentColor,
onPressed: (){ },
);
Flutter 2.x 以后新增了一些按钮组件 可以使用 ElevatedButton 替代 RaisedButton,也可以继续使用 RaisedButton
class MyButton extends StatelessWidget {
final String text; const MyButton(this.text, {Key? key}) : super(key: key); @override
Widget build(BuildContext context) {
return ElevatedButton(child: Text(this.text), onPressed: () {});
}
}
二、Wrap 组件
Wrap 可以实现流布局,单行的 Wrap 跟 Row 表现几乎一致,单列的 Wrap 则跟 Row 表现几乎一致。但 Row 与 Column 都是单行单列的,Wrap 则突破了这个限制,mainAxis 上空间不足时,则向 crossAxis 上去扩展显示。
属性 | 说明 |
direction | 主轴的方向,默认水平 |
alignment | 主轴的对其方式 |
spacing | 主轴方向上的间距 |
textDirection | 文本方向 |
verticalDirection |
定义了 children 摆放顺序,默认是 down,见 Flex 相关属性介绍。
|
runAlignment | run 的对齐方式。run 可以理解为新的行或者 |
runSpacing
|
run 的间距 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: LayoutDemo(),
));
}
} class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Wrap(
spacing: 10,
runSpacing: 10,
alignment: WrapAlignment.spaceEvenly,
children: <Widget>[
MyButton("第 1 集"),
MyButton("第 2 集"),
MyButton("第 3 集"),
MyButton("第 4 集"),
MyButton("第 5 集"),
MyButton("第 6 集第 6 集"),
MyButton("第 7 集"),
MyButton("第 8 集第 6 集"),
MyButton("第 9 集"),
MyButton("第 10 集"),
MyButton("第 11 集"),
],
);
}
} class MyButton extends StatelessWidget {
final String text; const MyButton(this.text, {Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return RaisedButton(
child: Text(this.text),
textColor: Theme.of(context).accentColor,
onPressed: () {},
);
}
}
页面布局 Wrap 组件的更多相关文章
- 13Flutter页面布局 Wrap组件
/* Flutter页面布局Wrap组件: Wrap可以实现流布局,单行的Wrap跟Row表现几乎一致,单列的Wrap则跟Row表现几乎一致. 但Row与Column都是单行单列的.Wrap则突破了这 ...
- 页面布局 Wrap 组件 和 RaisedButton按钮
一.RaisedButton 定义一个按钮 Flutter 中通过 RaisedButton 定义一个按钮.RaisedButton 里面有很多的参数,只讲简单的进行使用. return Raised ...
- 常用到的html页面布局和组件: 自己用
1. 用div当作圆 <div style="border: 1px solid blue;height: 100px; width: 100px; border-radius: 20 ...
- 046——VUE中组件之使用动态组件灵活设置页面布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Flutter——Wrap组件(流式布局)
Wrap 可以实现流布局,单行的 Wrap 跟 Row 表现几乎一致,单列的 Wrap 则跟 Row 表现几乎一致.但 Row 与 Column 都是单行单列的,Wrap 则突破了这个限制,mainA ...
- 11Flutter页面布局 Stack层叠组件 Stack与Align Stack与Positioned实现定位布局
/* Flutter 页面布局 Stack层叠组件: Stack与Align Stack与Positioned实现定位布局: Flutter Stack组件: Stack表示堆得意思,我们可以用Sta ...
- 10Flutter页面布局 Padding Row Column Expanded组件详解:
Padding组件: main.dart import 'package:flutter/material.dart'; import 'res/listData.dart'; /* flutter页 ...
- 【Flutter学习】页面布局之基础布局组件
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- 《React后台管理系统实战 :二》antd左导航:cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱
一.admin页面布局及路由创建 0)cmd批量创建目录及子目录 //创建各个目录,及charts和子目录bar md home category product role user charts\b ...
- Flutter 布局类组件:流式布局(Wrap和Flow)
前言 把超出屏幕显示范围会自动折行的布局称为流式布局.Flutter中通过Wrap和Flow来支持流式布局,将Row换成Wrap后溢出部分则会自动折行. Wrap 接口描述 Wrap({ Key ke ...
随机推荐
- HTML元素关系与CSS初步了解
元素之间的关系 1.父子关系 父子关系就是在一个双标签内嵌套其他元素,那么嵌套在其中的元素就相当于"子",其外层元素相当于"父". <body> ...
- Visual Studio 2017(vs2017)绿色便携版-北桃特供
原版的VisualStudio2017有几十G,安装起来特别慢,不少用户叫苦连天.该版本是精简过的vs2017,且简化了原来的安装程序,特别适用于教学.个人开发者.某些要求不高的企业. 该绿色便携版是 ...
- windwos11没有Hyper-V的解决方法
我的系统是windows11家庭版,程序添加这就没有hyper-v,但是可以手动添加,把下面这个脚本修改后缀.cmd即可(如:hyper-v.cmd),不会的可以直接下载我这个文件. Hyper-v执 ...
- 2022-05-11内部群每日三题-清辉PMP
1.一个低概率/高影响的技术风险发生了. 项目经理该怎么做? A. 提交变更请求来调整成本和进度基准 B. 进行风险审查,评估其对项目可交付成果的影响 C. 实施风险登记册中概述的减轻计划 D. 查询 ...
- python之利用logging模块封装python日志类
利用python自带的logging模块封装一个日志类,便于单元测试时调用该模块打印日志 说明: 日志,即记录程序在运行过程中的操作记录和出现的问题 日志调试信息分类等级,由低到高分别为:DEBUG ...
- idea快捷的输出常用语句
sout:System.out.println(); psvm:public static void main(String[] args) {}
- QT debug/moc_frmalarminfo.o:(.data.rel.ro._ZTV12FrmAlarmInfo[_ZTV12FrmAlarmInfo]+0x1c0): undefined reference to `non-virtual thunk to FrmAlarmInfo::~FrmAlarmInfo()'解决方法
这个报错很具有迷惑性,,,我在网上还看见了ZTI12的报错,但是仔细一看发现是.o文件报错. 简单解释下.o文件(此解释来自百度): o 就是object, 也就相当于windows下编译的obj文件 ...
- js 监听 变量变化
var o = {};setTimeout(function () { o.abb = '2';}, 4000);Object.defineProperties(o, { abb: { configu ...
- LAN8720 调试笔记
因为项目需要开始研究LAN8720,还没有仔细研究芯片手册就根据网上能找到的原理图画了第一版电路 调试整整花了我2天半,期间多亏硬汉哥的耐心解答.下面是我调试过程中遇到的一些坑 1.TPTX.TO ...
- Jmeter面试
jmeter面试题及答案 1.解释什么是jmeter? jmeter是一款java开源工具,用于性能负载测试.它旨在分析和衡量web应用程序和各种服务的性能和负载功能行为. 2.说明jmeter的工作 ...