我正在開發這個應用程式，它應該告訴你什么樣的酒或餐點，你可以用你目前正在享用的特定餐點或葡萄酒來享用。我目前正在使用戶能夠搜索酒/餐，他或她目前正在享受然后詢問他/她的侍酒師哪種酒/餐最適合。現在我的結構看起來像這樣：用戶打開螢屏，他看到了一個 ListView.builder，其中包含他可以從中選擇的葡萄酒/餐食，但不排除之前的選擇（型別...）。現在我實作了一個搜索，它使用從 firebase 資料中創建一個有狀態串列變數的事實，然后能夠搜索串列并顯示結果。現在為了顯示這些結果，我撰寫了一個名為 PrefInformationCard 的小部件，它基本上是一張顯示所有相關資料的卡片...... 現在為了向用戶表明他/她點擊的卡片已被選中，我實施了一個布爾檢查來更改小部件的顏色。這樣做有兩個問題。我在小部件中實作了它，這意味著在螢屏和串列視圖構建器中，我不知道是否選擇了卡片以及選擇了什么卡片，因此我無法將選定的資料傳遞到下一個螢屏。現在另一個問題是有可能一次選擇多張卡。
在第一個檔案中，您將看到第 4 步螢屏的代碼：
class AskSomellierStep4Screen extends StatefulWidget {
const AskSomellierStep4Screen({
Key? key,
required this.stepDescription,
required this.wineOrMeal,
required this.mealVSWine,
required this.selectedCuisine,
}) : super(key: key);
final String wineOrMeal;
final String stepDescription;
final bool mealVSWine;
final String selectedCuisine;
@override
State<AskSomellierStep4Screen> createState() =>
_AskSomellierStep4ScreenState();
}
class _AskSomellierStep4ScreenState extends State<AskSomellierStep4Screen> {
List<String> dataLabel = [
'Home',
'Search',
'Account',
];
late Future resultsLoaded;
List<IconData> data = [
CustomIcons.home,
CustomIcons.search,
CustomIcons.user,
];
getResults() async {
var data = await FirebaseFirestore.instance
.collection(widget.wineOrMeal)
.where('type', isEqualTo: widget.selectedCuisine)
.get();
setState(() {
allResults = data.docs;
});
filterResultsList();
return data.docs;
}
List allResults = [];
List filteredResults = [];
onSearchChanged() {
print(searchController.text);
filterResultsList();
}
filterResultsList() {
var showResults = [];
if (searchController.text != '') {
// we have a search parameter
for (var searchSnapshot in allResults) {
var name = searchSnapshot['name'].toLowerCase();
if (name.contains(searchController.text.toLowerCase())) {
showResults.add(searchSnapshot);
}
}
} else {
// we do not have a search parameter
showResults = List.from(allResults);
}
setState(() {
filteredResults = showResults;
});
}
TextEditingController searchController = TextEditingController();
@override
void initState() {
super.initState();
searchController.addListener(onSearchChanged);
}
@override
void dispose() {
searchController.removeListener(onSearchChanged);
searchController.dispose();
super.dispose();
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
resultsLoaded = getResults();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
HomeScreenHeader(
subText: 'Wine and Food',
mainText: 'Ask your Somellier',
boxWidth: 238,
),
Padding(
padding: const EdgeInsets.only(
left: 172,
top: 92,
),
child: Text(
'Step 4',
style: GoogleFonts.poppins(
textStyle: TextStyle(
color: Theme.of(context).indicatorColor,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 97,
),
child: Text(
widget.stepDescription,
style: GoogleFonts.poppins(
textStyle: TextStyle(
color: Theme.of(context).primaryColorLight,
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 35,
top: 25,
),
child: Stack(
children: [
Container(
height: 35,
width: 320,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(20.0),
),
),
Positioned(
left: 10,
top: 14.5,
child: SizedBox(
height: 21,
width: 300,
child: TextField(
controller: searchController,
style: GoogleFonts.poppins(
textStyle: const TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold)),
decoration: InputDecoration(
hintText: 'Search',
hintStyle: GoogleFonts.poppins(
textStyle: TextStyle(
color: Theme.of(context).hintColor,
fontSize: 16,
fontWeight: FontWeight.bold),
),
border: InputBorder.none,
),
),
),
),
Positioned(
left: 320 - 35,
top: 119 - 110,
child: SizedBox(
height: 17,
width: 17,
child: SvgPicture.asset(
'assets/icons/general/search.svg',
color: Theme.of(context).indicatorColor,
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 35,
top: 15,
),
child: Text(
'Popular Choices',
style: GoogleFonts.poppins(
textStyle: const TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 35,
top: 5,
),
child: SizedBox(
height: 370,
width: 320,
child: Center(
child: ListView.builder(
dragStartBehavior: DragStartBehavior.down,
scrollDirection: Axis.vertical,
itemCount: filteredResults.length,
itemBuilder: (context, index) => widget.mealVSWine
? PrefInformationCardWine(
snapShotDocument: filteredResults[index],
cardColor: Theme.of(context).primaryColor,
selected: false,
)
: PrefInformationCardMeal(
snapshotDocument: filteredResults[index],
cardColor: Theme.of(context).primaryColor,
selected: false),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 35,
top: 25,
),
child: SubmitSettingChangesButton(
buttonText: 'Continue',
cancelText: 'Cancel',
cancelOnTap: () {
Navigator.pop(context);
},
continueOnTap: () {
Navigator.pushAndRemoveUntil(
context,
createRoute(FindingRecommendationScreen()),
(route) => false);
},
),
),
Padding(
padding: const EdgeInsets.only(
top: 15,
left: 171,
),
child: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: SizedBox(
height: 16,
width: 47,
child: Center(
child: Text(
'Go Back',
style: GoogleFonts.poppins(
textStyle: TextStyle(
color: Theme.of(context).indicatorColor,
fontSize: 11,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
),
],
),
);
}
}
這是 PrefInformationCard 的相關代碼：
class PrefInformationCardWine extends StatefulWidget {
PrefInformationCardWine({
Key? key,
required this.snapShotDocument,
required this.cardColor,
required this.selected,
}) : super(key: key);
DocumentSnapshot snapShotDocument;
Color cardColor;
bool selected;
@override
State<PrefInformationCardWine> createState() =>
_PrefInformationCardWineState();
}
class _PrefInformationCardWineState extends State<PrefInformationCardWine> {
Color backgroundColor(context, selected) {
setState(() {
if (widget.selected == true) {
widget.cardColor = Theme.of(context).primaryColorLight;
} else {
widget.cardColor = Theme.of(context).primaryColor;
}
});
return widget.cardColor;
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(
bottom: 25,
),
child: GestureDetector(
onTap: () {
setState(() {
widget.selected = !widget.selected;
});
},
child: Stack(
children: [
Container(
height: 185,
width: 320,
decoration: BoxDecoration(
color: backgroundColor(context, widget.selected),
boxShadow: [
BoxShadow(
offset: const Offset(0, 4),
color: const Color(0xff000000).withOpacity(.25),
),
],
borderRadius: BorderRadius.circular(
35,
),
),
),
...
如果有人可以幫助我解決這個問題，我會很高興，因為坦率地說，我不知道如何解決這個問題。先感謝您：）
Padding(
padding: const EdgeInsets.only(
left: 35,
top: 25,
),
child: SubmitSettingChangesButton(
buttonText: 'Continue',
cancelText: 'Cancel',
cancelOnTap: () {
Navigator.pop(context);
},
continueOnTap: () {
Navigator.pushAndRemoveUntil(
context,
createRoute(FindingRecommendationScreen(
snapshotName: _selectedSnapshot,
)),
(route) => false);
},
),
),
這就是我想要傳遞資料的方式
uj5u.com熱心網友回復：
您應該使用回呼在第 4 步螢屏中設定狀態，而不是處理卡片中的選定狀態。
（這將重建整個第 4 步螢屏，但我不確定僅使用 setState 的另一種方法）
例如：
late DocumentSnapshot _selectedSnapshot;
final List filteredResults = [];
@override
Widget build(BuildContext context) {
return SizedBox(
height: 370,
width: 320,
child: Center(
child: ListView.builder(
dragStartBehavior: DragStartBehavior.down,
scrollDirection: Axis.vertical,
itemCount: filteredResults.length,
itemBuilder: (context, index) => widget.mealVSWine
? PrefInformationCardWine(
snapShotDocument: filteredResults[index],
cardColor: Theme.of(context).primaryColor,
isSelected: filteredResults[index] == _selectedSnapshot,
onSelected: () {
setState(() {
_selectedSnapshot = filteredResults[index];
});
},
)
: PrefInformationCardMeal(
snapshotDocument: filteredResults[index],
cardColor: Theme.of(context).primaryColor,
isSelected: filteredResults[index] == _selectedSnapshot,
onSelected: () {
setState(() {
_selectedSnapshot = filteredResults[index];
});
},
),
),
),
);
}
}
然后在您的卡中：
class PrefInformationCardWine extends StatefulWidget {
PrefInformationCardWine({
Key? key,
required this.snapShotDocument,
required this.cardColor,
required this.isSelected,
required this.onSelected,
}) : super(key: key);
DocumentSnapshot snapShotDocument;
Color cardColor;
bool isSelected;
VoidCallback onSelected;
@override
State<PrefInformationCardWine> createState() =>
_PrefInformationCardWineState();
}
class _PrefInformationCardWineState extends State<PrefInformationCardWine> {
Color backgroundColor(context, selected) {
setState(() {
if (widget.isSelected == true) {
widget.cardColor = Theme.of(context).primaryColorLight;
} else {
widget.cardColor = Theme.of(context).primaryColor;
}
});
return widget.cardColor;
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(
bottom: 25,
),
child: GestureDetector(
onTap: widget.onSelected,
child: Stack(
children: [
Container(
height: 185,
width: 320,
decoration: BoxDecoration(
color: backgroundColor(context, widget.isSelected),
boxShadow: [
BoxShadow(
offset: const Offset(0, 4),
color: const Color(0xff000000).withOpacity(.25),
),
],
borderRadius: BorderRadius.circular(
35,
),
),
)
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/478454.html