Flutter WearOS圆形表盘Widget布局：底部按钮显示不全解决方案咨询

问题描述 #

我希望在WearOS屏幕底部设置三个按钮，以下代码在矩形表盘上运行正常：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            child: Text('test'),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Row(
              children: [
                ElevatedButton(
                  onPressed: () => {},
                  child: Icon(Icons.delete),
                  style: ElevatedButton.styleFrom(
                    shape: CircleBorder(),
                    padding: EdgeInsets.all(0),
                    backgroundColor: Colors.green, // <-- Button color
                    foregroundColor: Colors.white, // <-- Splash color
                  ),
                ),
                ElevatedButton(
                  onPressed: () => {},
                  child: Icon(Icons.edit),
                  style: ElevatedButton.styleFrom(
                    shape: CircleBorder(),
                    padding: EdgeInsets.all(0),
                    backgroundColor: Colors.green, // <-- Button color
                    foregroundColor: Colors.white, // <-- Splash color
                  ),
                ),
                ElevatedButton(
                  onPressed: () => {},
                  child: Icon(Icons.play_arrow),
                  style: ElevatedButton.styleFrom(
                    shape: CircleBorder(),
                    padding: EdgeInsets.all(0),
                    backgroundColor: Colors.green, // <-- Button color
                    foregroundColor: Colors.white, // <-- Splash color
                  ),
                ),
              ],
            ),
          )
        ],
      )
    );

但在圆形表盘上按钮无法完全显示，请问如何确保按钮在圆形表盘上完全可见？

解决方法 #

1. 用SafeArea适配安全区域 #

WearOS圆形表盘会裁剪边缘区域，SafeArea能自动识别屏幕安全范围，避免内容被裁切。将底部的Row包裹在SafeArea内：

Align(
  alignment: Alignment.bottomCenter,
  child: SafeArea(
    child: Row(
      // 原有Row内容
    ),
  ),
)

2. 缩小按钮尺寸并优化布局 #

圆形屏幕横向空间有限，缩小按钮图标和整体尺寸，同时给Row设置均匀分布的对齐方式：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    ElevatedButton(
      onPressed: () => {},
      child: Icon(Icons.delete, size: 20),
      style: ElevatedButton.styleFrom(
        shape: CircleBorder(),
        padding: EdgeInsets.all(8),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
        fixedSize: Size(40, 40),
      ),
    ),
    // 另外两个按钮做相同尺寸调整
  ],
)

3. 约束Row的最大宽度 #

通过ConstrainedBox限制Row的最大宽度，确保它不超出圆形屏幕的可视范围：

Align(
  alignment: Alignment.bottomCenter,
  child: ConstrainedBox(
    constraints: BoxConstraints(
      maxWidth: MediaQuery.of(context).size.width * 0.9,
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        // 按钮内容
      ],
    ),
  ),
)

4. 针对屏幕形状动态调整布局 #

使用WearOS专属的WatchShape组件判断屏幕形状，给圆形屏幕添加额外内边距：

@override
Widget build(BuildContext context) {
  return WatchShape(
    builder: (context, shape, child) {
      return Scaffold(
        body: Stack(
          children: [
            Container(child: Text('test')),
            Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding: shape == Shape.round
                    ? EdgeInsets.symmetric(horizontal: 16)
                    : EdgeInsets.zero,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    // 按钮内容
                  ],
                ),
              ),
            ),
          ],
        ),
      );
    },
  );
}

内容的提问来源于stack exchange，提问作者Meeresgott