如何降低SegmentedButton的高度？

Question

我第一次使用 SegmentedButton，当我使用 SizedBox 将其高度减小到 25 时，我很惊讶它没有使文本居中：

这是我的代码。如何将高度降低到 25 并保持文本垂直居中？

enum GoalButtons { todo, done }

class ToDoAndDoneRadioButtons extends StatefulWidget {
  const ToDoAndDoneRadioButtons({
    super.key,
  });

  @override
  State<ToDoAndDoneRadioButtons> createState() => _GoalRadioButtonsState();
}

class _GoalRadioButtonsState extends State<ToDoAndDoneRadioButtons> {
  GoalButtons goalsView = GoalButtons.todo;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 25.0,
      width: 300,
      child: GetBuilder<SwitchController>(
        builder: (switchController) => MouseRegion(
          child: SegmentedButton<GoalButtons>(
            style: ButtonStyles.calendarToggles,
            showSelectedIcon: false,
            segments: const <ButtonSegment<GoalButtons>>[
              ButtonSegment<GoalButtons>(
                value: GoalButtons.todo,
                label: Text('TO-DO'),
              ),
              ButtonSegment<GoalButtons>(
                value: GoalButtons.done,
                label: Text('DONE'),
              ),
            ],
            selected: <GoalButtons>{goalsView},
            onSelectionChanged: (_) {},
          ),
        ),
      ),
    );
  }
}

Answer 1

更合适的方法是设置style4visualDensity到 -4 之间。tapTargetSize进一步减少因使用而产生的空白MaterialTapTargetSize.shrinkWrap

SegmentedButton<GoalButtons>(
  segments: const [
    ButtonSegment<GoalButtons>(
      value: GoalButtons.todo,
      label: Text('TO-DO'),
    ),
    ButtonSegment<GoalButtons>(
      value: GoalButtons.done,
      label: Text('DONE'),
    ),
  ],
  selected: <GoalButtons>{GoalButtons.todo},
  onSelectionChanged: (_) => null,
  style: const ButtonStyle(
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
    visualDensity: VisualDensity(horizontal: -3, vertical: -3),
  ),
);