颤振是否有上下文操作栏，用于从列表视图中选择多个项目

Question

您好，我正在处理一个项目，我需要从列表视图中选择多个项目。我尝试了下面的代码，但问题是，如果我选择一个项目，然后向上滚动并向下滚动到该项目的颜色应该更改为白色。如果有可以解决这些问题的软件包，请帮助我。欢迎任何帮助或代码。

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();}
class _MyHomePageState extends State<MyHomePage> {
bool longPressFlag = false;
List<int> indexList = new List();
void longPress() {
setState(() {
if (indexList.isEmpty) {
longPressFlag = false;
} else {
longPressFlag = true;
}
});}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new ListView.builder(
itemCount: 3,
itemBuilder: (context, index) {
return new CustomWidget(
index: index,
longPressEnabled: longPressFlag,
callback: () {
if (indexList.contains(index)) {
indexList.remove(index);
} else {
indexList.add(index);
}
longPress();
},
);
},),
);}}
class CustomWidget extends StatefulWidget {
final int index;
final bool longPressEnabled;
final VoidCallback callback;
const CustomWidget({Key key, this.index, this.longPressEnabled,    this.callback}) : super(key: key);
@override
_CustomWidgetState createState() => new _CustomWidgetState();
}
class _CustomWidgetState extends State<CustomWidget> {
bool selected = false;
@override
Widget build(BuildContext context) {
return new GestureDetector(
onLongPress: () {
setState(() {
selected = !selected;
});
widget.callback();
},
onTap: () {
if (widget.longPressEnabled) {
setState(() {
selected = !selected;
});
widget.callback();
}
},
child: new Container(
margin: new EdgeInsets.all(5.0),
child: new ListTile(
title: new Text("Title ${widget.index}"),
subtitle: new Text("Description ${widget.index}"),
),
decoration: selected? new BoxDecoration(color: Colors.black38, border: new Border.all(color: Colors.black)): new BoxDecoration(),
),
);
}}

Answer 1

您应该将"选定"状态保留在列表数据中，而不是在小部件中。

像这样：

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:playground/feature_discovery.dart';
void main() {
timeDilation = 1.0;
runApp(MaterialApp(home: MyHomePage()));
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool longPressFlag = false;
List<Element> indexList = new List();
int selectedCount = 0;
void longPress() {
setState(() {
if (indexList.isEmpty) {
longPressFlag = false;
} else {
longPressFlag = true;
}
});
}
@override
Widget build(BuildContext context) {
for (var i = 0; i < 50; i++) {
indexList.add(Element(isSelected: false));
}
return new Scaffold(
appBar: AppBar(
title: Text("Title"),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only( right: 15.0),
child: Center(child: Text("$selectedCount")),
),
],
),
body: new ListView.builder(
itemCount: 50,
itemBuilder: (context, index) {
return new CustomWidget(
isSelected: indexList[index].isSelected,
index: index,
longPressEnabled: longPressFlag,
callback: () {
onElementSelected(index);
if (indexList.contains(index)) {
indexList.remove(index);
} else {
indexList.add(Element());
}
longPress();
},
);
},
),
);

}

onElementSelected(int index) {
setState(() {
if(indexList[index].isSelected)
selectedCount--;
else
selectedCount++;
indexList[index].isSelected = !indexList[index].isSelected;
});
}
}
class CustomWidget extends StatefulWidget {
final int index;
final bool longPressEnabled;
final VoidCallback callback;
final bool isSelected;
const CustomWidget(
{Key key,
this.index,
this.longPressEnabled,
this.callback,
this.isSelected})
: super(key: key);
@override
_CustomWidgetState createState() => new _CustomWidgetState();
}
class _CustomWidgetState extends State<CustomWidget> {
@override
Widget build(BuildContext context) {
return new GestureDetector(
onLongPress: () {
widget.callback();
},
onTap: () {
if (widget.longPressEnabled) {
widget.callback();
}
},
child: new Container(
margin: new EdgeInsets.all(5.0),
child: new ListTile(
title: new Text("Title ${widget.index}"),
subtitle: new Text("Description ${widget.index}"),
),
decoration: widget.isSelected
? new BoxDecoration(
color: Colors.black38,
border: new Border.all(color: Colors.black))
: new BoxDecoration(),
),
);
}
}
class Element {
Element({this.isSelected});
bool isSelected;
}