[英]How to toggle in Flutter Stateless widget
I want to be able to select one item from a list, and when the item is clicked on, the check signed be toggled to checked. 我希望能够从列表中选择一项,然后单击该项,将选中的支票切换为已选中。 I also want to make sure, a user can select just one item from the list at a time. 我还想确保用户一次只能从列表中选择一项。
Here is my recipient card: 这是我的收款人卡:
class RecipientCard extends StatelessWidget {
const RecipientCard({Key key, this.recipient}) : super(key: key);
final recipient;
@override
Widget build(BuildContext context) {
bool selected = false;
return Card(
child: Row(
children: <Widget>[
Container(
decoration: new BoxDecoration(
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(4.0),
bottomLeft: const Radius.circular(4.0),
),
),
width: 40.0,
height: 50.0,
// Should be able to toggle the icons here
child: selected ?
IconButton(
icon: Icon(Icons.check),
onPressed: () {
selected = false;
},
) :
IconButton(
icon: Icon(Icons.check_box_outline_blank) ,
onPressed: () {
selected = true;
print(selected);
},
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(10.0),
child: Text.rich(
TextSpan(children: [
TextSpan(text: '${recipient.recipientName}:', style: TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold)),
TextSpan(text: ' ${recipient.recipientCity} ${recipient.recipientCountry}, Number: ${recipient.recipientPhone}, ${recipient.recipientBank} ${recipient.receiveVia} ',)
]),
style: TextStyle(
fontSize: 14.0,
),
),
),
),
],
),
);
}
}
I call that in a listbuilder as: 我在listbuilder中称其为:
return ListView.builder(
shrinkWrap: true,
itemCount: recipients.length,
itemBuilder: (BuildContext context, int index) {
Recipient recipient = recipients[index];
return Dismissible(
key: Key(recipient.id),
onDismissed: (DismissDirection direction) {
removeRecipient(recipient, state);
},
child: RecipientCard(recipient: recipient),
background: Container(color: Colors.red),
);
},
);
How can I achieve this? 我该如何实现? Thank you 谢谢
The parent must be responsible for selecting. 父母必须负责选择。 The child must know whether it is selected or not, and notify the parent when it gets selected. 孩子必须知道是否被选中,并在被选中时通知父母。
Try this: 尝试这个:
class RecipientCard extends StatelessWidget {
const RecipientCard({
Key key,
this.recipient,
this.selected,
this.onSelect,
}) : super(key: key);
final Recipient recipient;
final bool selected;
final VoidCallback onSelect;
@override
Widget build(BuildContext context) {
return Card(
child: Row(
children: <Widget>[
Container(
...
child: selected
? IconButton(
icon: Icon(Icons.check),
onPressed: onSelect,
)
: IconButton(
icon: Icon(Icons.check_box_outline_blank),
onPressed: onSelect,
),
...
),
],
),
),
);
// this variable must be in your class' scope
int selectedIndex;
...
return ListView.builder(
shrinkWrap: true,
itemCount: recipients.length,
itemBuilder: (BuildContext context, int index) {
Recipient recipient = recipients[index];
return Dismissible(
key: Key(recipient.id),
onDismissed: (DismissDirection direction) {
removeRecipient(recipient, state);
},
child: RecipientCard(
recipient: recipient,
selected: selectedIndex == index,
onSelect: () {
setState(() => selectedIndex = index);
},
),
background: Container(color: Colors.red),
);
},
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.