我希望能够从列表中选择一个项目,并且在单击该项目时,已签名的支票切换为已选中。我还想确保用户一次只能从列表中选择一项。
这是我的收件人卡片:
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,
),
),
),
),
],
),
);
}
}
我在列表生成器中称其为:
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),
);
},
);
我怎样才能做到这一点?谢谢
最佳答案
家长必须负责选择。 child 必须知道自己是否被选中,并在被选中时通知 parent 。
试试这个:
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),
);
},
);
关于flutter - 如何在 Flutter Stateless widget 中切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56309245/