ListView常用构造
一. ListTile
| 属性 |
作用 |
| leading |
前置图标(表示位置, 内容可以图标但可以扩展, child属性) |
| title |
标题(表示位置, 内容可以图标但可以扩展, child属性) |
| subtitle |
副标题(表示位置, 内容可以图标但可以扩展, child属性) |
| trailing |
后置图标(表示位置, 内容可以图标但可以扩展, child属性) |
| isThreeLine |
是否三行显示 |
| dense |
直观感受是整体大小 |
| contentPadding |
内容内边距 |
| enabled |
是否可以触发事件 |
| onTap |
点击事件 |
| onLongPress |
长按事件 |
| selected |
是否选中状态 |
基本使用
import 'package:flutter/material.dart';
import 'package:flutter_i18n/flutter_i18n.dart';
import 'package:hybrid/classes/WYChimeSdManager/Model/chimeSdManagerModel.dart';
import '../Controller/chimeSdManagerVC.dart';
class ChimeSdManager extends StatelessWidget {
List<ChimeSdManagerModel> dataSource = [];
@override
Widget build(BuildContext context) {
dataSource.clear();
dataSource.add(ChimeSdManagerModel.baseInfomationModel(context));
dataSource.add(ChimeSdManagerModel.recordSettingModel(context));
dataSource.add(ChimeSdManagerModel.formatModel(context));
// TODO: implement build
return new Scaffold(
appBar: AppBar(
leading: new IconButton(
icon: new Image(
// nav_back_highlighted
image: new AssetImage("assets/images/nav_back_normal.png"),
height: 20,
width: 20,
),
onPressed: () {
Navigator.of(context).pop();
},
padding: EdgeInsets.only(left: 15),
),
title: new Text(
FlutterI18n.translate(context, "SD Manager"),
style: new TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
elevation: 0,
),
body: new ListView(
children: dataSource.map((ChimeSdManagerModel model) {
return new ListTile(
leading: new Text(
model.title
),
trailing: new Image(
image: new AssetImage("assets/images/img_com_arrow.png"),
width: 8,
height: 14,
),
);
}).toList(),
),
);
}
}
二. builder
| 属性 |
作用 |
| scrollDirection |
Axis.horizontal/ vertical 水平/ 垂直滑动 |
| padding |
内间距 |
| reverse |
是否倒序显示 默认正序 false |
| primary |
不管内容是否够, 都可以滑动 |
| itemExtent |
每一个item的高度 |
| shrinkWrap |
内容适配(child 高度会适配 item填充的内容的高度) |
| itemCount |
item个数 |
| physics |
滑动类型设置(可以通过这个设置不能滑动等. |
| cacheExtent |
设置预加载的区域 |
| controller |
滑动监听 |
三. separated
可以通过这个直接设置分割线
- 这里要介绍一个控件
Divider (水平分割线)
A one device pixel thick horizontal line, with padding on either side.
| 属性 |
作用 |
| height |
高度 |
| indent |
距左 |
| endIndent |
距右 |
| color |
颜色 |
new ListView.separated(
itemCount: 3, // 个数为3,
itemBuilder: (BuildContext context, int index) {
return new Container(
child: new Row(
children: <Widget>[
Padding( // padding一个文本控件
child: new Text(
"ring1",
style: TextStyle(
fontWeight: FontWeight.bold,
color: GlobalConfig.mainTitleColor),
),
padding: EdgeInsets.only(left: 30),
),
Expanded( // Expanded会尽可能的充满分布在Row, Column, or Flex的主轴方向上；
child: new Container(
width: 10,
height: 50,
),
),
new Container(
child: new FlatButton(
child: _getCurrentImage(index),
onPressed: () => {
setState(() => {
if (_ringtoneType == WYRingtoneType.rings)
{
_ringSelect = index,
}
else
{
_motionSelect = index,
}
}),
},
),
// width: 50,
margin: EdgeInsets.only(right: 0),
)
],
),
color: Colors.white,
height: 55,
width: MediaQuery.of(context).size.width,
);
},
// 分割线创建
separatorBuilder: (BuildContext context, int index) {
return new Divider(
height: 1,
indent: 30,
color: GlobalConfig.lineColor,
);
}),
网友评论