Flutter带背景的查看全部按钮（Row布局）实现求助

针对你的需求，当前代码核心问题是左侧仅为普通文本而非可点击按钮，同时可对右侧元素的对齐和样式做微调，以下是修正后的代码：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    // 左侧：带按钮效果的文本
    TextButton(
      onPressed: () {
        // 点击事件逻辑
      },
      style: TextButton.styleFrom(
        padding: EdgeInsets.zero,
        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ),
      child: Text(
        'Reminder',
        style: subtitleTextStyles,
      ),
    ),
    // 右侧：VIEW ALL + 圆形数字框
    Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        // 可选：将VIEW ALL设为可点击按钮
        TextButton(
          onPressed: () {
            // 点击事件逻辑
          },
          style: TextButton.styleFrom(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
          ),
          child: Text(
            'VIEW ALL',
            style: subtitleTextStyles,
          ),
        ),
        Container(
          alignment: Alignment.center,
          height: 24, // 调整大小匹配目标视觉效果
          width: 24,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12), // 半径设为宽高一半确保正圆
            color: Color(0xFF8C0C14),
          ),
          child: Text(
            '03',
            style: TextStyle(
              color: primaryWhite,
              fontSize: 12, // 调整字体大小适配容器
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    ),
  ],
)

关键修改说明： #

• 左侧按钮化：用TextButton替代普通Text，通过样式设置移除默认内边距，实现文本即按钮的效果，同时保留原文字样式
• 右侧对齐优化：给右侧Row添加crossAxisAlignment: CrossAxisAlignment.center，确保VIEW ALL和数字框垂直居中对齐
• 圆形容器优化：将容器宽高设为一致，borderRadius设为宽高的一半，确保是标准正圆形；调整字体大小避免文字溢出
• VIEW ALL可选处理：如果目标图中VIEW ALL是可点击元素，用TextButton实现；若仅为静态文本，替换回普通Text即可

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