flutter 实践1 ---- ListView的使用
2019-12-19 本文已影响0人
Maj_sunshine
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,
);
}),
