flutter页面布局三
RaisedButton
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) {
// TODO: implement build
return RaisedButton(
child: Text('第一季'),
textColor: Theme.of(context).accentColor,
onPressed: (){
},
);
}
}

但是单独为了一个按钮写一个组件的话,当需要多个按钮的时候,就需要进行封装了。
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
MyButton("第1集"),
MyButton("第2集"),
MyButton("第3集"),
MyButton("第4集"),
MyButton("第5集"),
MyButton("第6集"),
MyButton("第7集"),
MyButton("第8集"),
MyButton("第9集"),
MyButton("第10集"),
MyButton("第11集"),
MyButton("第3集"),
MyButton("第4集"),
MyButton("第5集"),
MyButton("第6集"),
MyButton("第7集"),
MyButton("第8集"),
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) {
// TODO: implement build
return RaisedButton(
child: Text(this.text),
textColor:Theme.of(context).accentColor,
onPressed: (){
}
);
}
}
此时,由于按钮数量较多,一行排不下了,但是并没有像我们预期的那样自动换行,而是出现了溢出的提示,这种情况下,我们就需要使用Wrap组件了。
Wrap 组件
- direction :主轴的方向,默认水平
- alignment :主轴的对其方式
- spacing:主轴方向上的间距
- textDirection:文本方向
- verticalDirection:定义了 children 摆放顺序,默认是 down
- runAlignment :run 的对齐方式。run 可以理解为新的行或者列,如果是水平方向布局的话,run 可以理解为新的一行
- runSpacing :run 的间距
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Wrap(
spacing:10,
runSpacing: 10,
children: <Widget>[
MyButton("第1集"),
MyButton("第2集"),
MyButton("第3集"),
MyButton("第4集"),
MyButton("第5集"),
MyButton("第6集"),
MyButton("第7集"),
MyButton("第8集"),
MyButton("第9集"),
MyButton("第10集"),
MyButton("第11集"),
MyButton("第3集"),
MyButton("第4集"),
MyButton("第5集"),
MyButton("第6集"),
MyButton("第7集"),
MyButton("第8集"),
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) {
// TODO: implement build
return RaisedButton(
child: Text(this.text),
textColor:Theme.of(context).accentColor,
onPressed: (){
}
);
}
}
现在,功能已经实现了,我们可以在此基础上,结合其他的组件进行一下界面优化了:
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 600,
width: 400,
color: Colors.pink,
padding: EdgeInsets.all(10),
child: Wrap(
spacing:10,
runSpacing: 10,
direction: Axis.vertical,
// alignment:WrapAlignment.spaceEvenly,
// runAlignment: WrapAlignment.center,
children: <Widget>[
MyButton("第1集"),
MyButton("第2集"),
MyButton("第3集"),
MyButton("第4集"),
MyButton("第5集"),
MyButton("第6集"),
MyButton("第7集"),
MyButton("第8集"),
MyButton("第9集"),
MyButton("第10集"),
MyButton("第11集"),
MyButton("第3集"),
MyButton("第4集"),
MyButton("第5集"),
MyButton("第6集"),
MyButton("第7集"),
MyButton("第8集"),
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) {
// TODO: implement build
return RaisedButton(
child: Text(this.text),
textColor:Theme.of(context).accentColor,
onPressed: (){
}
);
}
}
flutter页面布局三的更多相关文章
- css篇-页面布局-三栏布局
页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. 1)浮动 2)绝对定位 3)Flexbox 4)表格布局 5)网格布局(CSS3的Grid布局) 代码: ...
- flutter页面布局二
Stack 在flutter中,Stack表示堆的意思,可以用来实现页面的定位布局. Stack组件接收两个可选参数: alignment:配置所有子元素的显示位置 children:子组件 在 ...
- Flutter 页面布局 Stack层叠组件
Stack 表示堆的意思,我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局 属性 说明 alignment 配置所有子元素的 ...
- flutter 页面布局 Paddiing Row Column Expanded 组件
Flutter Paddiing 组件 在 html 中常见的布局标签都有 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属 性.这个时候我们可以用 Pad ...
- flutter页面布局一
Padding组件 在 html 中常见的布局标签都有 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属性.这个时候我们可以用 Padding 组件处理容器 ...
- css页面布局--三栏(两边固定中间自适应&两边自适应中间固定)
http://www.cnblogs.com/zhanyishu/p/5656875.html
- 13Flutter页面布局 Wrap组件
/* Flutter页面布局Wrap组件: Wrap可以实现流布局,单行的Wrap跟Row表现几乎一致,单列的Wrap则跟Row表现几乎一致. 但Row与Column都是单行单列的.Wrap则突破了这 ...
- 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页 ...
随机推荐
- 学习mybaits用到的4张表
items orderdetail orders user
- 【xinsir】githook之precommit分享
钩子类型 使用node编写githook,以pre-commit为例: 1.在项目下配置自动生成pre-commit文件,一般可以在启动项目的脚本下添加: modifyPreCommit: funct ...
- forEach究竟能不能改变数组的值
forEach究竟能不能改变数组的值 :https://blog.csdn.net/ZhengKehang/article/details/81281563 初学者每次提到Array对象的时候有些烦人 ...
- 7、numpy——广播
1.广播的引出 广播(Broadcast)是 numpy 对不同形状(shape)的数组进行数值计算的方式, 对数组的算术运算通常在相应的元素上进行. 如果两个数组 a 和 b 形状相同,即满足 a. ...
- bzoj3218 a + b Problem(网络流+主席树)
$ans=\sum_{color_i=black}\ b_i+\sum_{color_i=white}\ w_i-\sum_{i=abnormal}\ p_i$ 把它转化一下 $ans=\sum_{i ...
- Source Insight symbol not found
使用SourceInsight查看源代码时,发现点击查看相关类型时,无法关联到其代码,出现 symbol not found, 然而明明在我的头文件有定义的 网上查了一下主要是因为新建工程导入文件后, ...
- NGUI的sprite的使用(九宫切图)
一,图集的添加和背景图的选择 图集的选择Atlas和背景图的选择Sprite 二,type的sliced切背景图的使用 当选择Sprite后的edit时,我们就可以设置当前背景图的边距,也有切图的意思 ...
- 让 Git Bisect 帮助你
让 Git Bisect 帮助你 英文原文:Letting Git Bisect Help You Git 提供来很多的工具来帮助我们改进工作流程. bisect 命令就是其中之一, 虽然由于使用 ...
- JS高级 — 函数中的this指向问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- CSS-03 queue方法
queue方法 摘自W3C school手册,用于简单理解使用queue方法 队列 每个元素均可拥有一到多个由 jQuery 添加的函数队列.在大多数应用程序中,只使用一个队列(名为 fx).队列运行 ...