我希望能够从列表中选择一项,然后单击该项目,将选中的支票切换为已选中。我还想确保用户一次只能从列表中选择一项。
这是我的收款人卡:
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,
),
),
),
),
],
),
);
}
}
我在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),
);
},
);
我该如何实现?谢谢
答案 0 :(得分:1)
父母必须负责选择。孩子必须知道是否被选中,并在被选中时通知父母。
尝试一下:
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),
);
},
);