RaisedButton

为了实现今天的效果,在认识Wrap组件之前,先认识一下flutter中的按钮组件,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 组件

Wrap 可以实现流布局,单行的 Wrap 跟 Row 表现几乎一致,单列的 Wrap 则跟 Row 表现几乎一致。但 Row 与 Column 都是单行单列的,Wrap 则突破了这个限制,mainAxis 上空间不足时,则向 crossAxis 上去扩展显示。
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页面布局三的更多相关文章

  1. css篇-页面布局-三栏布局

    页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. 1)浮动 2)绝对定位 3)Flexbox 4)表格布局 5)网格布局(CSS3的Grid布局) 代码: ...

  2. flutter页面布局二

    Stack 在flutter中,Stack表示堆的意思,可以用来实现页面的定位布局. Stack组件接收两个可选参数: alignment:配置所有子元素的显示位置 children:子组件    在 ...

  3. Flutter 页面布局 Stack层叠组件

    Stack 表示堆的意思,我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局 属性 说明 alignment 配置所有子元素的 ...

  4. flutter 页面布局 Paddiing Row Column Expanded 组件

    Flutter Paddiing 组件 在 html 中常见的布局标签都有 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属 性.这个时候我们可以用 Pad ...

  5. flutter页面布局一

    Padding组件 在 html 中常见的布局标签都有 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属性.这个时候我们可以用 Padding 组件处理容器 ...

  6. css页面布局--三栏(两边固定中间自适应&两边自适应中间固定)

    http://www.cnblogs.com/zhanyishu/p/5656875.html

  7. 13Flutter页面布局 Wrap组件

    /* Flutter页面布局Wrap组件: Wrap可以实现流布局,单行的Wrap跟Row表现几乎一致,单列的Wrap则跟Row表现几乎一致. 但Row与Column都是单行单列的.Wrap则突破了这 ...

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

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

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

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

随机推荐

  1. 学习mybaits用到的4张表

    items orderdetail orders user

  2. 【xinsir】githook之precommit分享

    钩子类型 使用node编写githook,以pre-commit为例: 1.在项目下配置自动生成pre-commit文件,一般可以在启动项目的脚本下添加: modifyPreCommit: funct ...

  3. forEach究竟能不能改变数组的值

    forEach究竟能不能改变数组的值 :https://blog.csdn.net/ZhengKehang/article/details/81281563 初学者每次提到Array对象的时候有些烦人 ...

  4. 7、numpy——广播

    1.广播的引出 广播(Broadcast)是 numpy 对不同形状(shape)的数组进行数值计算的方式, 对数组的算术运算通常在相应的元素上进行. 如果两个数组 a 和 b 形状相同,即满足 a. ...

  5. 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 ...

  6. Source Insight symbol not found

    使用SourceInsight查看源代码时,发现点击查看相关类型时,无法关联到其代码,出现 symbol not found, 然而明明在我的头文件有定义的 网上查了一下主要是因为新建工程导入文件后, ...

  7. NGUI的sprite的使用(九宫切图)

    一,图集的添加和背景图的选择 图集的选择Atlas和背景图的选择Sprite 二,type的sliced切背景图的使用 当选择Sprite后的edit时,我们就可以设置当前背景图的边距,也有切图的意思 ...

  8. 让 Git Bisect 帮助你

    让 Git Bisect 帮助你 英文原文:Letting Git Bisect Help You   Git 提供来很多的工具来帮助我们改进工作流程. bisect 命令就是其中之一, 虽然由于使用 ...

  9. JS高级 — 函数中的this指向问题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  10. CSS-03 queue方法

    queue方法 摘自W3C school手册,用于简单理解使用queue方法 队列 每个元素均可拥有一到多个由 jQuery 添加的函数队列.在大多数应用程序中,只使用一个队列(名为 fx).队列运行 ...