flutter - 如何在 Flutter 的 ListView 中显示特定小部件的子小部件?
问题描述
单击选定的小部件项目时,我需要comment TextFormField
在列表视图的小部件内可见。现在试试下面的例子,它在列表视图小部件内的所有 TextFormField 都是可见的。但是当单击所选卡片小部件的按钮时,我只需要显示一个 TextFormField 表单(所选小部件的 TextFormField) 。Add Comment
例子 -
class _ForumState extends State<Forum> {
TextEditingController comment = TextEditingController();
bool addComment = false;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Padding(
padding: const EdgeInsets.fromLTRB(18, 0, 18, 0),
child: ListView.builder(
shrinkWrap: true,
itemCount: 3,
itemBuilder: (context, i) {
return Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0)),
elevation: 5,
child: Padding(
padding: const EdgeInsets.fromLTRB(18, 3, 10, 3),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Container(
child: Text('Name',
style: GoogleFonts.montserrat(
fontStyle: FontStyle.normal,
fontSize: 15,
fontWeight: FontWeight.w300,
)),
),
),
Container(
child: Text('2020/07/12',
overflow: TextOverflow.ellipsis,
style: GoogleFonts.montserrat(
fontStyle: FontStyle.normal,
fontSize: 15,
fontWeight: FontWeight.w300,
)),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Container(
child: Text('Contact Herb Seller',
style: GoogleFonts.montserrat(
fontStyle: FontStyle.normal,
fontSize: 18,
fontWeight: FontWeight.w700,
)),
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Container(
child: Text(
'You Can give your own flyer or ask us to desgin a cover for you. Select the option you want.',
style: GoogleFonts.montserrat(
fontStyle: FontStyle.normal,
fontSize: 15,
fontWeight: FontWeight.w300,
)),
),
),
// This is the place is struggle!!
addComment
? TextFormField(
controller: comment,
)
: SizedBox(
width: 0,
height: 0,
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40)),
color: Color(0xFF91C220),
elevation: 8,
child: Padding(
padding: const EdgeInsets.only(
right: 6, left: 6, top: 4, bottom: 4),
child: Text(
'Add Comment',
style: GoogleFonts.montserrat(
fontStyle: FontStyle.normal,
fontSize: 15,
fontWeight: FontWeight.w500,
color: Colors.white),
),
),
onPressed: () {
// print(position);
setState(() {
if (addComment) {
addComment = true;
} else {
addComment = false;
}
});
},
),
)
],
)),
),
),
);
}),
),
);
}
}
有什么办法可以解决这个问题吗?
谢谢!
解决方案
我找到了解决方案!我使用选定的小部件位置作为条件!
这就是我解决问题的方法!
class _ForumState extends State<Forum> {
TextEditingController comment = TextEditingController();
String pos = "";
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Padding(
padding: const EdgeInsets.fromLTRB(18, 0, 18, 0),
child: ListView.builder(
shrinkWrap: true,
itemCount: 3,
itemBuilder: (context, i) {
return Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0)),
elevation: 5,
child: Padding(
padding: const EdgeInsets.fromLTRB(18, 3, 10, 3),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Container(
child: Text('Name',
style: GoogleFonts.montserrat(
fontStyle: FontStyle.normal,
fontSize: 15,
fontWeight: FontWeight.w300,
)),
),
),
Container(
child: Text('2020/07/12',
overflow: TextOverflow.ellipsis,
style: GoogleFonts.montserrat(
fontStyle: FontStyle.normal,
fontSize: 15,
fontWeight: FontWeight.w300,
)),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Container(
child: Text('Contact Herb Seller',
style: GoogleFonts.montserrat(
fontStyle: FontStyle.normal,
fontSize: 18,
fontWeight: FontWeight.w700,
)),
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Container(
child: Text(
'You Can give your own flyer or ask us to desgin a cover for you. Select the option you want.',
style: GoogleFonts.montserrat(
fontStyle: FontStyle.normal,
fontSize: 15,
fontWeight: FontWeight.w300,
)),
),
),
// This was the place is struggle and now I fixed it
pos == i.toString()
? TextFormField(
controller: comment,
)
: SizedBox(
width: 0,
height: 0,
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40)),
color: Color(0xFF91C220),
elevation: 8,
child: Padding(
padding: const EdgeInsets.only(
right: 6, left: 6, top: 4, bottom: 4),
child: Text(
'Add Comment',
style: GoogleFonts.montserrat(
fontStyle: FontStyle.normal,
fontSize: 15,
fontWeight: FontWeight.w500,
color: Colors.white),
),
),
onPressed: () {
// print(position);
setState(() {
pos = i.toString();
});
},
),
)
],
)),
),
),
);
}),
),
);
}
}
推荐阅读
- kotlin - 在 Kotlin 中,var s: String = "hello" 和 var s = "hello" as String 有什么区别?
- bash - 在 Bash 脚本中并行使用 Ping
- virtualbox - Minikube 不能在 VirtualBox 上运行
- c# - 按 Enumerable 列表排序,没有给出想要的结果
- javascript - 用javascript取表中的数据
- sql - 对 SUM 没有信心,不确定如何限制字段
- c - 确定平均课程成绩的程序
- xcode - OSX 上的 Xcode 10 图像按钮状态
- python - 如何将一维数据转换为二维数组?
- java - TestNG - 如何在每次并行运行的类中的所有测试之前运行一次设置