Flutter 改变 ButtonSegment 约束

问题描述 投票:0回答:1

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

enter image description here

但是,有一个设置,出现第三个选项,然后文本溢出: enter image description here

如何更改 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 内项目周围的实际空间

flutter
1个回答
0
投票

padding
中使用
style
属性,如下所示:

SegmentedButton(
...
  style: SegmentedButton.styleFrom(
    padding: EdgeInsets.symmetric(horizontal: 0),
  ),
...
);
© www.soinside.com 2019 - 2024. All rights reserved.