网传微信付出页面的第三方链接一个格子需求广告费1一个亿，微信付出页十分适合做功用导航，本篇运用 ListView和 GridView 模数组的界说仿了微信付出的页面，一起介绍了怎样装修一个组件的布景和边沿款式。
左边是微信付出flutter结构优缺点的界面，右侧是开发完毕后的作用，图标是从 iconfont 上下载的。首要介绍一下本篇涉及到的组件。
带装修作用的 Container
实践过程中咱们经常会数组去重方法遇到一个容器需求额外的款式，例如圆角，布风景等。在 Flutter 中，字体转化器关于各种容器都有一个 decoration 的特征，能够用于装修容器。典型的用法有设置布风景、圆角、边框和阴影等，其间布风景能够运json格局怎样翻开用骤变色。decoration 是一个 Decoration 政策，最常用的是 BoxDecoration，BoxDecoration 的特征如下所示：
cojson格局怎样翻开nst BoxDecoration({
th数组指针is.color,
this.image,
this.border,
this.b字体辨认扫一扫orderRadius,
this.boxShadow,
this.gradient,
this.backgroundBlendMode,
this.shape = BoxShape.rectangle,
})
其间color为运用色彩填充容器，imagefluttershy 为 运用图片作为布景，border 为边框，borderRadiusflutter中文官网 为边框圆角，boxShadow 为容器阴影，gradient 运用骤变色作为布景，backgr嵌套oundBlendMode 是指与容flutter菜鸟教程器的混合模型，默许是掩盖，shape 是布景形状，默许是矩形。其间布景部分咱们一般只会挑选一种。这儿以上面的绿色圆弧布景为例，还加上了一点点骤变（骤变色支撑多个，fluttershy能够根据需求调度），示例代码如下：
return Container(
//字体转化器......
decoration: BoxDecoration(
borderRadius:数组 BorderRadius.circular(4.0),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bott嵌套循环omCenter,
coloflutter结构优缺点rs: [
Color(0xjson格局转化FF56AF6D),
Color(0xFF56AA6D),
]),
),
//...
);
这儿设置了边角为圆弧，半径为4，运用骤变色填充，骤变方向为从顶部中心到底部中心，骤变色有两个。
Row 行布局和 Column列布局
这个在之前的第五篇列表篇介绍过，其间 Row 代表行布局（即子元素按一行JSON排布），Column 代表列布局（即子元素按一列排布）。详细能够参阅数组和链表的差异Flutter 入门与实战（五）：来一个图文并茂的列表。
ListView列flutter菜鸟教程表组件
列表视图，和之前的一篇相同，仅仅本篇的用数组去重法不同，用于完毕整个页面能够按列表的方法进行翻滚Flutter，直接将各个部分组件放入到列表的 children特征中，而不是运用数组构建列表元素fluttering，有嵌套分类汇总的操作过程点类似翻滚视图的用法。
GridView网格组件
GridView 用于将一个容器按部队差异，能够指定主轴的元素个数（根据翻滚方flutter怎样读音发音向定），之后自动按总元素的个数别离填json格局充到网格，例数组的界说如按纵向flutter菜鸟教程翻滚时，则能够指定行方向一行有多少个网格，每个网格一个元json格局怎样翻开素。超出一行数量后会自动换另json格局一行。最简单的用法是运用 GridView.count 方法构建flutter怎样读音发音 GridView，用法如下：
GridView.count(
crossAxisSpacing: gridSpace,
maFlutterinAxisSpacing: gridSpace,
crossAxisCount: crossAxisCount,
//设置以下两个参数，阻挠GridVi数组和链表的差异ew的翻滚，避免与 Li数组的界说stView 抵触
shrinkWrap:字体管家 true,
physics: NeverScrollableScrollPhysics(),
children: buttons.map((item) {
return _getMenus(item['icon'], item['name'], color: textColor);
}).toList(),
);
这儿 crossAxisSpacing 是与翻滚方向笔直的元素的距离，如按纵向（默许值）翻滚，则是横向行元素之间的距离。mainAxisSpacing 是与翻滚方向相同的元素的距离。children 即网格中嵌套循环的元素。这儿需求留神的是，因为 本例中GridView是嵌套在 ListView 里边的，两个组件都是纵向翻滚，这样会引起抵触导致布字体管家局无法满足绑缚。因而，在这儿设置了 shrinkWrap 为 tr字体转化器ue 和 physi嵌套if函数cs 为NeverScrollableScrollPhys数组和链表的差异ics，以阻挠 GridView 的翻滚，然后满足绑缚。
代码完毕
- 首要来剖析布局，悉数菜嵌套分类汇总的操作过程单按钮其实都是相同的布局，能够运数组c言语用一起的列数组词布局完毕菜单按钮，行进复用性。菜单按钮从上到下一次为图标、距离（图标与文字之间）和菜单称谓。完毕代码如下：
Column _getMenus(String icon, String namejson数据, {Coloflutter是什么意思r color = Colors.black}) {
return Column(
mainAxisAlignment: Main数组和链表的差异AxisAlignment.centeflutter菜鸟教程r,
children: <Widget>[
SizedBox(
child: Image.asset(icon),
width: 50,
height: 50,
),
SizedBox(
heigh嵌套分类汇总的操作过程t: 5,
),
Text(name, style: TextStyle(fontSiflutter面试题ze: 14.0, color: color, height: 2)),
],
);
经过传输一个图标JSON称谓，菜单称谓和可选的字体颜字体色（顶部区域和其json他的数组词文字色彩不同）来完毕单个菜单。
- 其次来看顶部区域，顶部区域只需两个按钮，运用带装修的容器完毕布景的装修和圆角。再选用行布局将两个菜单按钮在嵌套分类汇总横向均匀排布。一起，运用 Cflutter是什么意思enter 布局将两个菜单坚持中部居中。这儿字体大小怎样调指定了容器的高度，这是因为从漂亮上看太矮了不太嵌套分类汇总协调，实践开发要根据 UI 规划稿定。
Widget _headerGridButtons() {
double height = 144;
List<Map<String, String>> buttons = GridMockData.hejson数据aderGrids();
return Container(
height: height,
margin: EdgeInsets.fromLTRB(MARGIN, MARGIN, MARGIN, MARGIN / 2),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4.0)fluttershy,
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,flutter中文官网
colors: [
Color(0xFF56AF6D),
Color(0xFF56AA6DFlutter),
]),
),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: buttons
.map((item) =>
_getMenus(item['icon'], item['name'],字体大小怎样调 color: Colors.white))
.toList()),
),
);
}
- 其他菜单布局都是相同，仅仅区域标题，菜单数量、菜单内容不同，因而能够一起封装一个通用的方法来构建任意方式的菜单，以及json解析设置区域标题的字json体款式、圆角布景等特征。菜单均运用 GridView 完毕网格局布局，一起因为菜单布局相同，能够封装一个fluttering通用的方法来指定网格一行按钮的数量，按钮字体色彩等特征，数组排序完毕代码的复用。
Widget _dynamicGridButtons(List<Map<String, String>> butto字体大小怎样调ns,字体规划 String title,
{int crossAxisCount = 4}) {
return Container(
margin: EdgeInsets.fromLTRB(MARGIN, MARGIN, MARGIN, MARGIN / 2),
padding: EdgeInsets.all(MARGIN),
decoratiojson文件是干什么的n: BoxDecoration(
bordflutter面试题erRadius: BorderRadius.circular(4.0),
color: Colors.white,
),
child: Column(
mainAxisAl嵌套循环ignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(color: Colors.greyjson格局[700]),
),
SizedBo数组和链表的差异x(height: 20),
_gridButtons(buttons, crossAxisCount, textColor:字体辨认扫一扫 Colors.black),字体辨认扫一扫
],
),
);
}
Gjson解析ridView _gridButtons(List<Map<String, String>> buttons, int crossAxisfluttershyCount,
{Color textColor = Colors.white})jsonp {
doubflutteringle gridSp嵌套分类汇总的操作过程aceflutter面试题 = 5.0;
return Gri字体辨认扫一扫dView.count(
crossAxisSpacing: gridSpace,
mainAxisSpacing: gridSpace,
cjson格局怎样翻开rossAxisCount: crossAxisCount,
//嵌套设置以下两个参数，阻挠GridView的翻滚，避免与字体大小怎样调 Lis字体转化器tView 抵触
shrinkWrap: true,
physics: NeverScrollableScrollPhysicjson格局转化s(),
chifluttershyldren: buttons.map((item) {
return _getMenus(item['icon'], item['name'], color: textColor);
}).toList(),
);
}
}
- ListView 构建无缺页面json格局：实践的整个页面很简单，只需求将各个区域放入到 Lis字体全国tView 的 children 特征即可，从这儿也能够看出，将子组件尽可能细化，不但能够行进代码复用性，还能够下降嵌套层级，行进代码的可读性和可维护性。
@override
Widget build(BuildContext context) {
return Scaffoldjson格局转化(
body: ListView(
children: [嵌套是什么意思
_headerGridButtons(),
_dynamicGridflutter怎样读音发音Button字体全国s(GridMockData.financeGrids(), '金融理财'),
_dynamicGridButtons(GridMockData.serviceGridjsons(), '生活服务'),
_dynamicGridButtons(GridMockData.thirdpartyGri嵌套分类汇总ds(), '购物消费'),
],
),
);
}
- Mock 数据预备
按钮数据均运用 Mock 数据，这儿仅仅返回一个 List<Map<String, String>>数组政策，政策里是每个菜单的图标文件称谓和菜单称谓，下面是金融服务区域的菜单 Mo嵌套查询sql语句ck方法。
static List<Map<数组公式StrinJSONg,嵌套分类汇总 String>> financeGrids() {
return [
{'name': '信用卡字体规划还字体大小怎样调款'fluttered, 'icon': 'images/grid-buttons/grid-1-1.png'},
{'na数组的界说me': '借钱', 'icon': 'images/grid-buttons/grid-1-2.png'},
{'name': '理财', 'icon': 'images/grid-buttons/gri嵌套分类汇总的操作过程d-1-3.png'},
{'name': '保险', 'icon': 'images/grid-butt嵌套查询ons/grid-1-4.png'},
];
}
- 其他待改善的当地：从代码中能够看出，访问按钮的时分是运用 Map 政策的键来访问的，需求运用[‘name’]或[‘icon’]来访问，这种方法十分不利于flutter结构优缺点编码，并且很简单拼写错误。因而，实践嵌套查询运用中应当将 Json 政策（即 Map）转化为实体类，这样就能够经过访问实体类的特征来设置菜单的参数，实践维护起来更为便当。
结语：Flutter 供应的根底 UI 组件库能够满足绝大部分杂乱页面布局，经过各种布局组件的组合即可完毕。因而，了解根底的布局组件的特性十分重要。一起，需求留神组件的拆分和抽离完毕子组件的封装，行进复用性数组的一起也避免了嵌套层级过fluttered深的问题。
评论(0)