我在学习 flutter 但有些东西我在任何地方都找不到。
例如,我想制作一个 ChoiceChips群 , 类似于图片
但我不知道怎么放自定义标签 在这种芯片中。
我怎样才能使它成为可能?
import 'package:flutter/material.dart';
class MyThreeOptions extends StatefulWidget {
@override
_MyThreeOptionsState createState() => _MyThreeOptionsState();
}
class _MyThreeOptionsState extends State<MyThreeOptions> {
int _value = 0;
// ----What I want to appear----//
/*void v (int index){
switch (index){
case 0: Text('Phones');
break;
case 1: Text('Computers');
break;
case 2: Text('Accessories');
break;
}}*/
@override
Widget build(BuildContext context) {
return Wrap(
alignment: WrapAlignment.center,
spacing: 12.0,
children: List<Widget>.generate(
3,
(int index) {
return ChoiceChip(
pressElevation: 0.0,
selectedColor: Colors.blue,
backgroundColor: Colors.grey[100],
label: Text("item $index"),
selected: _value == index,
onSelected: (bool selected) {
setState(() {
_value = selected ? index : null;
});
},
);
},
).toList(),
);}
}
最佳答案
import 'package:flutter/material.dart';
class ChoiceChips extends StatefulWidget {
final List chipName;
ChoiceChips({Key key, this.chipName}) : super(key: key);
@override
_ChoiceChipsState createState() => _ChoiceChipsState();
}
class _ChoiceChipsState extends State<ChoiceChips> {
String _isSelected = "";
_buildChoiceList() {
List<Widget> choices = List();
widget.chipName.forEach((item) {
choices.add(Container(
child: ChoiceChip(
label: Text(item),
labelStyle: TextStyle(color: Colors.white),
selectedColor: Colors.pinkAccent,
backgroundColor: Colors.deepPurpleAccent,
selected: _isSelected == item,
onSelected: (selected) {
setState(() {
_isSelected = item;
});
},
),
));
});
return choices;
}
@override
Widget build(BuildContext context) {
return Wrap(
spacing: 5.0,
runSpacing: 3.0,
children: _buildChoiceList(),
);
}
}
关于flutter - 如何在 Flutter 中使用带有自定义标签的 ChoiceChip 创建包装,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54493500/