flutter - 使用 Flutter 的 List Item UI 设计
问题描述
我是颤振的初学者。
我有一个锁定图标图像,需要在单元格内显示一半,在单元格外显示一半。
我想为 ListItem 创建 UI。
我已经编写了如下代码,但它不起作用:
ListTile makeListTile() => ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 10.0),
title: Text(
"Item Title",
style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Expanded(
flex: 0,
child: Icon(Icons.settings, size: 20.0),),
Expanded(
flex: 4,
child: Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text("120",
style: TextStyle(color: Colors.black54))),),
Expanded(
flex: 4,
child: Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text("150",
style: TextStyle(color: Colors.black54))),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 5.0, right: 5.0),
child: Icon(Icons.add, size: 20,)),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Text("1",
style: TextStyle(color: Colors.black54))),),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 5.0, right: 5.0),
child: Icon(Icons.add, size: 20,)),
)
],
),
trailing:
new Stack(
children:[
Icon(Icons.lock, size: 20.0)
]),
onTap: () {
},
);
请帮我。
谢谢。
解决方案
我建议你自己先尝试,因为这将有助于学习一种不同的方式来构建 UI。如果它很紧急,那么这里是代码。但我再次建议您先尝试一下。您需要根据您的要求更改假人中的所有内容。
Stack(
children: <Widget>[
Container(
margin: const EdgeInsets.all(15.0),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10.0),
border: Border.all(width: 2.0, color: Colors.yellow)),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
'Item Name',
style: TextStyle(
color: Colors.yellow, fontSize: 14.0),
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Icon(
Icons.close,
color: Colors.yellow,
size: 30.0,
),
)
],
),
Padding(
padding: const EdgeInsets.only(bottom: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.adjust,
color: Colors.yellow,
size: 20.0,
),
Text(
'Dummy Text',
style: TextStyle(
color: Colors.yellow, fontSize: 14.0),
)
],
),
Row(
children: <Widget>[
Icon(
Icons.add_circle_outline,
color: Colors.yellow,
size: 20.0,
),
Padding(padding: const EdgeInsets.all(2.0)),
Text(
'1',
style: TextStyle(
color: Colors.yellow, fontSize: 14.0),
),Padding(padding: const EdgeInsets.all(2.0)),
Icon(
Icons.remove_circle,
color: Colors.yellow,
size: 20.0,
),
Padding(padding: const EdgeInsets.all(5.0))
],
)
],
),
)
],
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(
Icons.group,
size: 30.0,
color: Colors.yellow,
),
)
],
)
这是它现在的样子:
推荐阅读
- javascript - 在 Vue 3 Composition API 中将反应性道具从组件传递到可组合项的最佳/推荐方式是什么?
- machine-learning - Tensorboard 未在 tansorboard_in_notebook 中显示输出。ipynb 示例
- java - 在“循环排序”二维数组中搜索元素
- c - malloc():将元素添加到动态列表时损坏的顶部大小
- visual-studio - 在 Visual Studio 中设置 Artifactory 失败并出现 403
- python - 如何使用递归而不是在python中使用运算符来查找两个整数中的较大者
- c++ - 在 macOS 上获取大小写正确的文件名
- ios - 点击按钮时的图片和文字。SwiftUI
- angular - DevTool 文件系统不会将 index.html 网络资源映射到本地文件
- javascript - 如何单击一个按钮,侦听该单击,如果在特定浏览器上...添加另一个程序化单击?