我想创建一个带有芯片标签的TabBar,就像这样:
代码如下:
class TabChip extends StatefulWidget{
final String chipTitle;
TabChip(this.chipTitle) : assert(chipTitle != null);
@override
State<StatefulWidget> createState() {
return _TabChipState();
}
}
class _TabChipState extends State<TabChip>{
bool isSelected = false;
@override
Widget build(BuildContext context) {
return RawChip(
avatar: CircleAvatar(),
label: Text(widget.chipTitle,
style: TextStyle(
color: isSelected ? Colors.white : Colors.red,
fontWeight: FontWeight.bold
),),
backgroundColor: isSelected ? Colors.red : Colors.white, // Switch colors if chip is selected
shape: StadiumBorder(side: BorderSide(color: Colors.red, width: 2.0)),
selectedColor: Colors.red,
selected: isSelected,
onPressed: (){
setState(() {
isSelected = isSelected ? false : true;
});
},
// onSelected: (bool value){
// setState(() {
// isSelected = true;
// });
// },
);
}
}
现在,我已经能够使用 RawChip Widget 创建此基本大纲,但当选择芯片时,会在头像中显示一个勾号图标。
我想禁用 Avatar。
我还想添加每次只能选择单个选项卡的功能。
我该怎么做?