前言:手机的屏幕本身就很小,所以要合理利用空间,把主要的元素展示出来,次要或者不重要的元素等用户向看的时候再给用户展示。这类操作最常见的交互就是展开和闭合了。这里我们主要学习一下ExpansionTile
组件的使用。
实现效果:
知识点:
ExpansionTile组件
ExpansionTile Widget
就是一个可以展开闭合的组件,常用的属性有如下几个。
- title:闭合时显示的标题,这个部分经常使用
Text Widget
。 - leading:标题左侧图标,多是用来修饰,让界面显得美观。
- backgroundColor: 展开时的背景颜色,当然也是有过度动画的,效果非常好。
- children: 子元素,是一个数组,可以放入多个元素。
- trailing : 右侧的箭头,你可以自行替换但是我觉的很少替换,因为谷歌已经表现的很完美了。
- initiallyExpanded: 初始状态是否展开,为true时,是展开,默认为false,是不展开。
入口文件main.dart代码:
import 'package:flutter/material.dart';
import 'expansion_tile.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ExpansionTile',
theme: ThemeData.dark(),
home: ExpansionTileDemo(),
);
}
}
expansion_tile.dart 扩展组件代码:
import 'package:flutter/material.dart';
class ExpansionTileDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('ExpansionTileDemo')),
body: Center(
child: ExpansionTile( //添加一个展开闭合的组件
title: Text('Expansion Tile'),//闭合时的标题
leading: Icon(Icons.ac_unit),
backgroundColor: Colors.white24, //闭合时的颜色
children: <Widget>[ //展开时子部件
ListTile(
title: Text('List Tile1'),
subtitle: Text('subTitle1'),
),
ListTile(
title: Text('List Tile2'),
subtitle: Text('subTitle2'),
),
ListTile(
title: Text('List Tile3'),
subtitle: Text('subTitle3'),
)
],
initiallyExpanded: false, //初始状态为闭合状态(默认状态)
),
),
);
}
}