Flutter 改变 ButtonSegment 约束

Question

我有一个带有 ButtonSegments 的 SegmentedButton。我通常只有 2 段，一切都很顺利：

但是，有一个设置，出现第三个选项，然后文本溢出：

如何更改 ButtonSegments 的填充，以便标签/图标周围的空间更少

我的代码：

Container(
  width: double.infinity,
  child: SegmentedButton(
    segments: [
      ButtonSegment(
        value: 'local',
        label: Text(
          AppLocalizations.of(context)!.locally,
        ),
        icon: Icon(Icons.smartphone),
      ),
      if (isAdvancedOptions)
        ButtonSegment(
          value: 'selfHost',
          label: Text(
            AppLocalizations.of(context)!
                .selfHost,
          ),
          icon: Icon(Symbols.database),
        ),
      ButtonSegment(
        value: 'online',
        label: Text(
          AppLocalizations.of(context)!.online,
        ),
        icon: Icon(Icons.language),
      ),
    ],
    selected: {selectedStorage},
    onSelectionChanged: (selected) {
      setState(() {
        selectedStorage = selected.first;
      });
      logger.i(selected.toString());
    },
    style: isAdvancedOptions
        ? ButtonStyle(
            tapTargetSize: MaterialTapTargetSize
                .shrinkWrap,
            visualDensity: VisualDensity(
                horizontal: -3, vertical: -3),
          )
        : null,
  ),
),

我尝试过用柔性的、可扩展的包装它们，但没有任何效果。如何更改 ButtonSegment 内项目周围的实际空间

Answer 1

在

padding

中使用

style

属性，如下所示：

SegmentedButton(
...
  style: SegmentedButton.styleFrom(
    padding: EdgeInsets.symmetric(horizontal: 0),
  ),
...
);