我正在構建一個 Flutter 應用程式，其中使用 ListView 顯示一個串列。它回傳一個包含用戶資訊的 ListTile。該ListTile包含leading，title并subtitle與trailing設定為ElevatedButton。
這是它的樣子：
我想輕按“邀請按鈕”，改變其color，text和subtitle的ListTile
點擊后，它應該是這樣的。
我怎樣才能做到這一點？這是我寫的代碼。但它正在改變每個串列項的狀態。
class InviteFriends extends StatefulWidget {
const InviteFriends({Key? key}) : super(key: key);
@override
State<InviteFriends> createState() => _InviteFriendsState();
}
class _InviteFriendsState extends State<InviteFriends> {
bool isSelected = false;
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
}
用戶界面下ListView.builder：
ListTile(
title: const Text('Haris'),
subtitle: const Text(
isSelected ? 'Invitation Sent' : 'Not Invited Yet',
),
leading: CircleAvatar(
backgroundImage: NetworkImage(
_userProfile!.profilePhoto.toString(),
),
),
trailing: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0.0,
primary: isSelected ? Colors.orange : Colors.green,
side: BorderSide.none,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
child: const Text(
isSelected ? 'Invited': 'Invite',
),
onPressed: () {
setState(() {
isSelected = !isSelected;
});
},
),
);
我還在 ListTile 中嘗試過使用 Keys ，ValueKey(index)但它也不起作用。我該怎么辦？謝謝
uj5u.com熱心網友回復：
將 Tile 作為單獨的 StatefulWidget 帶出，以便每個都有自己的狀態。不要修改 State List.builder。而你對所有的 Tile 使用一個 isSelected 欄位，你都會參考這個條件。
請提供更多代碼，我可以提供幫助。以便我了解全貌
uj5u.com熱心網友回復：
您需要為串列創建不同的類。請執行以下操作：
ListView.builder(
itemCount: 3,
shrinkWrap: true,
itemBuilder: (ctx, i) {
return MyListItems();
}))
然后是 MyListItems。
class MyListItems extends StatefulWidget {
@override
MyListState createState() => MyListState();
}
class MyListState extends State<MyListItems> {
bool isSelected = false;
@override
Widget build(BuildContext context) {
return ListTile(
title: const Text('Haris'),
subtitle: Text(
isSelected ? "Invitation Sent" : 'Not Invited Yet',
),
leading: const CircleAvatar(
backgroundImage: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYtfZRhbGQtq2BapB2MXJfWIO2QriO5Wx3qQ&usqp=CAU'),
),
// use your image here
trailing: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0.0,
primary: isSelected ? Colors.orange : Colors.green,
side: BorderSide.none,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
child: Text(
isSelected ? 'Invited' : 'Invite',
),
onPressed: () {
setState(() {
isSelected = !isSelected;
});
},
),
);
}}
uj5u.com熱心網友回復：
return ListView.builder(
itemCount: itemCount.length
itemBuilder: (BuildContext context, int index) {
return Friend(
//arg if available
);
});
class Friend extends StatefulWidget {
const Friend({Key? key}) : super(key: key);
@override
_FriendState createState() => _FriendState();
}
class _FriendState extends State<Friend> {
bool isSelected = false;
@override
Widget build(BuildContext context) {
//put ListTile detail here
return Row(
children: [
FlatButton(//deprecated but other buttons work
key: PageStorageKey('random num'),//if you are interested in keeping the state of the button while navigating
onPressed: () {
setState(() {
isSelected = !isSelected;
});
},
child: Text(isSelected ? "INVITED" : "INVITE"))
],
);
}
}
uj5u.com熱心網友回復：
您創建一個串列，說“i”（變數）以了解每個 tile 的狀態，并使用 false 初始化所有。輕按將那里的狀態更改為 true。
final List<bool> selected = List.generate(20, (i) => false);
將串列“i”傳遞給 listview.builder，如：-
itemBuilder: (BuildContext context, i)
查看完整代碼
import 'package:flutter/material.dart';
class InviteFriends extends StatefulWidget {
const InviteFriends({Key? key}) : super(key: key);
@override
State<InviteFriends> createState() => _InviteFriendsState();
}
class _InviteFriendsState extends State<InviteFriends> {
bool isSelected = false;
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
final List<bool> selected = List.generate(20, (i) => false);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(top: 60),
child: ListView.builder(
// itemCount: i,
itemBuilder: (BuildContext context, i) {
return ListTile(
title: const Text('Haris'),
subtitle: Text(
selected[i] ? 'Invitation Sent' : 'Not Invited Yet',
),
leading: const CircleAvatar(
backgroundImage: AssetImage('assets/profile.gif'),
),
trailing: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0.0,
primary: selected[i] ? Colors.orange : Colors.green,
side: BorderSide.none,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
child: Text(
selected[i] ? 'Invited' : 'Invite',
),
onPressed: () {
setState(() => selected[i] = !selected[i]);
// setState(() {
// isSelected = !isSelected;
// });
}),
);
}),
),
);
}
}
謝謝
輸出
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/383023.html
上一篇：樹的完整概念與堆的深度剖析