Listview 如何为选定的ListItem onTap着色
我想从列表视图中选择颜色值，如下所示： 问题是我在尝试时打印了所有内容，代码：Listview 如何为选定的ListItem onTap着色,listview,flutter,selecteditem,Listview,Flutter,Selecteditem,我想从列表视图中选择颜色值，如下所示： 问题是我在尝试时打印了所有内容，代码： class _ProcedureList extends State<ProcedureList> { bool isSelected = true; _isSelected() { setState(() { if (isSelected) { isSelected = false; } else { isSelected =
class _ProcedureList extends State<ProcedureList> {
bool isSelected = true;
_isSelected() {
setState(() {
if (isSelected) {
isSelected = false;
} else {
isSelected = true;
}
});
}
@override
Widget build(BuildContext context) {
var procedureList = widget.filteredkits
.where((kit) => kit.brand == widget.brand)
.map((kit) => kit.procedure)
.toSet()
.toList();
return Expanded(
flex: 2,
child: Container(
padding: EdgeInsets.only(left: 35.0),
child: new ListView.builder(
itemCount: procedureList.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: EdgeInsets.all(6.0),
child: Column(
children: <Widget>[
new Container(
width: 300.0,
height: 30.0,
color: Colors.grey[700],
padding: EdgeInsets.all(6.0),
child: new Text(widget.brand),
),
GestureDetector(
onTap: () => widget.getProcedureSelectedandList(procedureList[index].toString()) & _isSelected(),
child: Container(
width: 300.0,
padding: EdgeInsets.all(3.0),
color: !isSelected ? Colors.white : Colors.orange,
child:
new Text(procedureList[index])
),
),
],
),
);
},
),
),
);
}
}
class\u过程列表扩展状态{
bool-isSelected=true；
_选举产生（）{
设置状态（）{
如果（当选）{
isSelected=false；
}否则{
isSelected=true；
}
});
}
@凌驾
小部件构建（构建上下文）{
var procedureList=widget.filteredkits
.where（（kit）=>kit.brand==widget.brand）
.map（（套件）=>套件程序）
.toSet（）
.toList（）；
扩大回报(
弹性：2，
子：容器(
填充：仅限边缘设置（左：35.0），
子项：新建ListView.builder(
itemCount:procedureList.length，
itemBuilder:（构建上下文，int索引）{
返回填充(
填充：所有边缘设置（6.0），
子：列(
儿童：[
新容器(
宽度：300.0，
身高：30.0，
颜色：颜色。灰色[700]，
填充：所有边缘设置（6.0），
子项：新文本（widget.brand），
),
手势检测器(
onTap:（）=>widget.getProcedureSelectedandList（过程列表[index].toString（））和(u isSelected（）)，
子：容器(
宽度：300.0，
填充：所有边缘设置（3.0），
颜色：！isSelected？颜色。白色：颜色。橙色，
儿童：
新文本（过程列表[索引]）
),
),
],
),
);
},
),
),
);
}
}
我不知道如何在事件发生时只给一个项目上色，以及我们是否可以更好地更改同一事件的文本颜色。您需要做的是重构代码，以便传递到
列表视图的小部件builder
函数拥有它自己的StatefulWidget
。因此，将builder函数中的小部件树移动到它自己单独的StatefulWidget
中，并在其中处理状态操作逻辑，而不是ProcedureList
。获取此行为的原因是，通过将逻辑移动到一个单独的StatefulWidget
中，从ListView.builder
生成的每个实例都将暴露在与isSelected
相同的状态值下。每个实例都将有自己的状态。您需要做的是重构代码这样，传递到ListView
builder
函数的小部件就拥有了自己的StatefulWidget
。因此，将builder函数中的小部件树移动到它自己单独的StatefulWidget
中，并在其中处理状态操作逻辑，而不是ProcedureList
。获取此行为的原因是，通过将逻辑移动到一个单独的StatefulWidget
中，从ListView.builder
生成的每个实例都将暴露在与isSelected
相同的状态值下。每个实例都将有自己的状态。每个实例都应该有一个isSelected值列表中的单个项，然后当用户单击列表中的一个项时，您将仅更改录制项索引的isSelected值，并且在build语句中，您应该根据传入索引的isSelected值执行操作
下面是一个例子：
List<String> items = [
"A",
"B",
"C",
"D",
"E",
"F",
"D",
"J",
"K",
"L",
"M",
"P"
];
class SampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: new Scaffold(
body: new ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return new SelectableWidget(
new SelectableWidgetViewModel(
items[index],
isSelected: false,
),
);
},
)),
);
}
}
class SelectableWidget extends StatefulWidget {
final SelectableWidgetViewModel viewModel;
SelectableWidget(this.viewModel);
@override
State<StatefulWidget> createState() {
return SelectableWidgetState();
}
}
class SelectableWidgetState extends State<SelectableWidget> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
Container container;
if (widget.viewModel.isSelected) {
container = new Container(
alignment: Alignment.center,
height: 100.0,
color: Colors.blue,
child: new Text(
widget.viewModel.title,
style: new TextStyle(color: Colors.red, fontSize: 18.0),
textAlign: TextAlign.center,
),
);
} else {
container = new Container(
alignment: Alignment.center,
height: 100.0,
color: Colors.red,
child: new Text(
widget.viewModel.title,
style: new TextStyle(color: Colors.blue, fontSize: 18.0),
textAlign: TextAlign.center,
),
);
}
return GestureDetector(
onTap: () {
setState(() {
widget.viewModel.isSelected = !widget.viewModel.isSelected;
});
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: container,
),
);
}
}
class SelectableWidgetViewModel {
bool isSelected;
String title;
SelectableWidgetViewModel(this.title, {this.isSelected = false});
}
类MyListWidgetState扩展状态{
清单项目=[“A”、“B”、“C”、“D”、“E”、“F”]；
Map itemsSelectedValue=Map（）；
@凌驾
小部件构建（构建上下文）{
返回新的ListView.builder(
itemCount:items.length，
itemBuilder：（上下文，索引）{
bool isCurrentIndexSelected=itemsSelectedValue[index]==null
错误的
：itemsSelectedValue[索引]；
集装箱集装箱装卸工；
如果（isCurrentIndexSelected）{
contianer=新容器(
对齐：对齐.center，
高度：100.0，
颜色：颜色，蓝色，
儿童：新文本(
项目[索引]，
样式：新文本样式（颜色：Colors.red，fontSize:18.0），
textAlign:textAlign.center，
),
);
}否则{
contianer=新容器(
对齐：对齐.center，
高度：100.0，
颜色：颜色，红色，
儿童：新文本(
项目[索引]，
样式：新文本样式（颜色：Colors.blue，fontSize:18.0），
textAlign:textAlign.center，
),
);
}
返回手势检测器(
onTap:（）{
打印（${！isCurrentIndexSelected}）；
itemsSelectedValue[索引]=！isCurrentIndexSelected；
设置状态（）{
打印（“OnClick:$index+${itemsSelectedValue[index]}”）；
});
},
孩子：填充(
填充：常数边集全部（8.0），
孩子：康蒂纳，
),
);
});
}
}
或者，您可以创建StateFull小部件，为列表中的每个项目保留自己的isSelected值，如下面的示例所示：
List<String> items = [
"A",
"B",
"C",
"D",
"E",
"F",
"D",
"J",
"K",
"L",
"M",
"P"
];
class SampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: new Scaffold(
body: new ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return new SelectableWidget(
new SelectableWidgetViewModel(
items[index],
isSelected: false,
),
);
},
)),
);
}
}
class SelectableWidget extends StatefulWidget {
final SelectableWidgetViewModel viewModel;
SelectableWidget(this.viewModel);
@override
State<StatefulWidget> createState() {
return SelectableWidgetState();
}
}
class SelectableWidgetState extends State<SelectableWidget> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
Container container;
if (widget.viewModel.isSelected) {
container = new Container(
alignment: Alignment.center,
height: 100.0,
color: Colors.blue,
child: new Text(
widget.viewModel.title,
style: new TextStyle(color: Colors.red, fontSize: 18.0),
textAlign: TextAlign.center,
),
);
} else {
container = new Container(
alignment: Alignment.center,
height: 100.0,
color: Colors.red,
child: new Text(
widget.viewModel.title,
style: new TextStyle(color: Colors.blue, fontSize: 18.0),
textAlign: TextAlign.center,
),
);
}
return GestureDetector(
onTap: () {
setState(() {
widget.viewModel.isSelected = !widget.viewModel.isSelected;
});
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: container,
),
);
}
}
class SelectableWidgetViewModel {
bool isSelected;
String title;
SelectableWidgetViewModel(this.title, {this.isSelected = false});
}
列表项=[
“A”，
“B”，
“C”，
“D”，
“E”，
“F”，
“D”，
“J”，
“K”，
“L”，
“M”，
“P”
];
类SampleApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“示例应用程序”，
主题：主题数据(
主样本：颜色。蓝色，
),
家：新脚手架(
正文：新建ListView.builder(
itemCount:items.len
class _ProcedureList extends State<ProcedureList> {
int isSelected = -1; // changed bool to int and set value to -1 on first time if you don't select anything otherwise set 0 to set first one as selected.
_isSelected(int index) { //pass the selected index to here and set to 'isSelected'
setState(() {
isSelected = index;
});
}
@override
Widget build(BuildContext context) {
var procedureList = widget.filteredkits
.where((kit) => kit.brand == widget.brand)
.map((kit) => kit.procedure)
.toSet()
.toList();
return Expanded(
flex: 2,
child: Container(
padding: EdgeInsets.only(left: 35.0),
child: new ListView.builder(
itemCount: procedureList.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: EdgeInsets.all(6.0),
child: Column(
children: <Widget>[
new Container(
width: 300.0,
height: 30.0,
color: Colors.grey[700],
padding: EdgeInsets.all(6.0),
child: new Text(widget.brand),
),
GestureDetector(
onTap: () => widget.getProcedureSelectedandList(procedureList[index].toString()) & _isSelected(index), //pass index value to '_isSelected'
child: Container(
width: 300.0,
padding: EdgeInsets.all(3.0),
color: isSelected != null && isSelected == index //set condition like this. voila! if isSelected and list index matches it will colored as white else orange.
? Colors.white
: Colors.orange,
child:
new Text(procedureList[index])
),
),
],
),
);
},
),
),
);
}
}