Question

假设以下代码

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")
                        ),
                      ),
                    ],
                  ),
              ),

结果如下：

第一个是一个简单的Chip小部件。这就是我希望拥有的“选定” ChoiceChip。但是正如您所看到的，第二块芯片看上去与第一个芯片不同。这是为什么？我对未选择的ChoiceChip的第三个感到满意。无论我做什么，我都无法让第二个看起来像第一个，因为ChoiceChip似乎使所有内容（绿色的头像以及背景颜色）都变暗了。

所选的ChoiceChip甚至看起来都不像已选中或处于活动状态。看上去几乎像是未选中的（第三个）。

感谢任何有关如何正确设置样式的提示。

Answer 1

看，解决方案似乎让您感到沮丧。至少在我弄清楚之前，这让我非常沮丧。

ChoceChip的行为就像一个按钮。现在，一个按钮需要一个非空的onPressed参数。如果未提供，则会呈现按钮的禁用状态。

类似地，ChoiceChip期望一个非null的onSelected参数。因此，有效的ChoiceChip声明如下所示：

ChoiceChip(
    selected: currentLevel >= 2,
    label: new Text("Level 2"),
    avatar: new CircleAvatar(
        backgroundColor: Colors.green,
        child: Text("2")
    ),
    onSelected: (value) {}
),

瞧，你有漂亮的ChoiceChips。

颤动的芯片和颜色-ChoiceChip为什么如此不同

1 个答案: