如何在Flutter中为SegmentedButton添加阴影

Question

我想向我的 SegmentedButton 添加内部和外部阴影，但它不起作用。 将 SegmentedButton 包装在容器内也不起作用，因为选定的元素边框和容器边框之间存在很大的间隙。

我尝试将其包装在容器中以添加所需的阴影，但它不起作用：

Container(
          width: double.infinity,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15),
            boxShadow: [
              const BoxShadow(
                color: Colors.black12,
                offset: Offset(3.0, 3.0),
                blurRadius: 2,
                spreadRadius: 1.0,
              ),
              BoxShadow(
                color: Colors.grey.shade800,
                offset: const Offset(-1, -1),
                blurRadius: 1,
                spreadRadius: 0.1,
              ),
            ],
          ),
          child: SegmentedButton<Graphendarstellung>(
            style: SegmentedButton.styleFrom(
              selectedBackgroundColor: Colors.orange,
              side: BorderSide.none,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15),
              ),
            ),
            segments: <ButtonSegment<Graphendarstellung>>[
              ButtonSegment<Graphendarstellung>(
                value: Graphendarstellung.donut,
                label: Text(AppLocalizations.of(context)!.donutChartShort),
                icon: const Icon(Icons.donut_large),
              ),
              ButtonSegment<Graphendarstellung>(
                value: Graphendarstellung.saeulen,
                label: Text(AppLocalizations.of(context)!.barChartShort),
                icon: const Icon(Icons.stacked_bar_chart),
              ),
            ],
            selected: <Graphendarstellung>{_graphendarstellung},
            onSelectionChanged: (Set<Graphendarstellung> newSelection) {
              setState(() {
                _graphendarstellung = newSelection.first;
              });
            },
          ),
        ),

Answer 1

您将无法使用容器添加内部阴影。如果您想要内部阴影，您将需要使用

Stack()

小部件。通常，您可以对内部阴影使用负扩散半径，但由于“分段”按钮是容器的子级，您将无法看到它。

我认为你的“差距”是由于你的

BoxShadows

中使用的偏移量造成的。

此样式是使用以下代码创建的：

Container(
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(15), boxShadow: const [
          BoxShadow(
            color: Colors.grey,
            blurRadius: 8,
            spreadRadius: 1.0,
          ),
        ]),
        child: SegmentedButton<int>(
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.resolveWith<Color>(
              (Set<MaterialState> states) {
                if (states.contains(MaterialState.selected)) {
                  return Colors.orange;
                }
                return Colors.grey;
              },
            ),
          ),
          segments: <ButtonSegment<Graphendarstellung>>[
          ButtonSegment<Graphendarstellung>(
            value: Graphendarstellung.donut,
            label: Text(AppLocalizations.of(context)!.donutChartShort),
            icon: const Icon(Icons.donut_large),
          ),
          ButtonSegment<Graphendarstellung>(
            value: Graphendarstellung.saeulen,
            label: Text(AppLocalizations.of(context)!.barChartShort),
            icon: const Icon(Icons.stacked_bar_chart),
          ),
        ],
        selected: <Graphendarstellung>{_graphendarstellung},
        onSelectionChanged: (Set<Graphendarstellung> newSelection) {
          setState(() {
            _graphendarstellung = newSelection.first;
          });
        },
        ),
      ),