flutter - 我想做可扩展的列表视图,如下图所示。如何在颤振中实现这种类型的功能?
问题描述
我怎样才能做到这一点?我曾尝试自定义 ExpansionTile,但无法在展开和折叠方面获得类似的效果。主要是前缀图标的尺寸较大,因此可扩展文本与日期不接近。此外,用于展开/折叠的后缀图标未完全被背景颜色覆盖。
我还附上了我尝试过的图像。我已经使用https://pub.dev/packages/expandable#-readme-tab-来实现类似的效果,但没有运气。
我真的被困在这个地方,需要任何帮助。您的帮助将不胜感激。谢谢。
解决方案
刚刚实现,试试这个:
ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return ExpandableNotifier(
child: Card(
elevation: 4,
child: Expandable(
collapsed: Container(
width: MediaQuery.of(context).size.width,
height: 105,
child: ExpandableButton(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: ClipOval(
child: Container(
height: 80,
width: 80,
color: Colors.yellow,
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Welkom bij Haaer',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
Text(
'2019/06/01 11:04',
style: TextStyle(
color: Colors.grey,
fontSize: 12.0,
),
),
Text(
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla',
softWrap: true,
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
],
),
),
),
Container(
color: Colors.yellow,
width: 30,
height: 105,
child: Icon(
Icons.keyboard_arrow_right,
color: Colors.white,
),
),
],
),
),
),
expanded: Container(
height: 200,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: ClipOval(
child: Container(
height: 80,
width: 80,
color: Colors.purple,
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Welkom bij Haaer',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
Text(
'2019/06/01 11:04',
style: TextStyle(
color: Colors.grey,
fontSize: 12.0,
),
),
Text(
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla',
softWrap: true,
),
SizedBox(
height: 5,
),
Container(
width: 80,
height: 20,
child: RaisedButton(
padding: EdgeInsets.all(0),
color: Colors.purple,
child: Text('show'),
onPressed: () {},
),
),
],
),
),
),
ExpandableButton(
child: Container(
color: Colors.purple,
width: 30,
height: 200,
child: Icon(
Icons.keyboard_arrow_down,
color: Colors.white,
),
),
),
],
),
),
),
),
);
},
),
推荐阅读
- flutter - 检测用户何时未在 Flutter 中与应用程序交互
- php - Laravel 5.6 如何重定向到移动应用程序网址?
- visual-studio-code - Visual Studio Code 的 Inc-Dec-Value 包?
- c - 将元素添加到数组,随机数结果
- numpy - Pytorch TypeError: eq() 收到了无效的参数组合
- ios - 在 Xcode 中快速拖动 UIImage
- matlab - 如何找到 norm(a,2)==c 的唯一解;当 c 是标量且 a=[x abs(1/x);x+1 1/x]
- c# - 如何在 Azure 中处理客户端证书
- api - YouTube iFrame API“setPlaybackQuality”不起作用
- java - JSON 格式的 RESTful Web 服务