Mar*_*arc 2 material-design flutter
假设以下代码
ChipTheme(
data: theme.chipTheme.copyWith(
//labelStyle: TextStyle(color: Colors.black),
secondaryLabelStyle: TextStyle(color: Colors.black),
//selectedColor: Colors.black,
secondarySelectedColor: Colors.grey[300],
//brightness: Brightness.light
),
child:
Row(
children: <Widget>[
Chip(
//selected: currentLevel >= 1,
label: new Text("Level 1"),
avatar: new CircleAvatar(
backgroundColor: Colors.green,
child: Text("1")
),
),
ChoiceChip(
selected: currentLevel >= 2,
label: new Text("Level 2"),
avatar: new CircleAvatar(
backgroundColor: Colors.green,
child: Text("2")
),
),
ChoiceChip(
selected: currentLevel >= 3,
label: new Text("Level 3"),
avatar: new CircleAvatar(
backgroundColor: Colors.green,
child: Text("3")
),
),
],
),
),
Run Code Online (Sandbox Code Playgroud)
结果如下:
第一个是一个简单的 Chip 小部件。这就是我想要的“选定”ChoiceChip。但正如您所看到的,第二个芯片与第一个芯片相比看起来有所不同。这是为什么?我对第三个感到满意,它是一个未选择的 ChoiceChip。无论我做什么,我都无法让第二个看起来像第一个,因为 ChoiceChip 似乎使所有内容变暗(绿色头像和背景颜色)。
所选的 ChoiceChip 甚至看起来不像是被选中或处于活动状态。它看起来几乎与未选择的(第三个)一样。
感谢您提供有关如何正确设计样式的任何提示。
小智 10
看吧,解决方案可能会让您感到沮丧。至少在我弄清楚之前它让我很沮丧。
ChoceChip 的行为就像一个按钮。现在按钮需要一个非空的 onPressed 参数。如果未提供,则会呈现按钮的禁用状态。
同样,ChoiceChip 需要一个非空的 onSelected 参数。因此,有效的 ChoiceChip 声明如下所示:
ChoiceChip(
selected: currentLevel >= 2,
label: new Text("Level 2"),
avatar: new CircleAvatar(
backgroundColor: Colors.green,
child: Text("2")
),
onSelected: (value) {}
),
Run Code Online (Sandbox Code Playgroud)
瞧,你就有了漂亮的 ChoiceChips。
| 归档时间: |
|
| 查看次数: |
5460 次 |
| 最近记录: |