Flutter开发：如何在App底部添加3个圆角边框按钮？

我需要在Flutter应用底部添加3个圆角边框按钮，所有按钮需处于同一行且位于body内容上方。以下是当前的Widget build方法代码及效果参考图：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('WinLife'),
      elevation: 10,
      backgroundColor: const Color(0XFF82B58D),
      leading: Container(
        padding: EdgeInsets.all(5),
        child: Image.asset('assets/images/logo/WinLife.png'),
      ),
      actions: <Widget>[
        IconButton(
          icon: Icon(
            Icons.favorite,
            color: Colors.white,
          ),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(
            Icons.settings,
            color: Colors.white,
          ),
          onPressed: () {},
        )
      ],
    ),
    body: ListView.builder(
      itemBuilder: (BuildContext ctx, int index) {
        return Padding(
          padding: EdgeInsets.all(10),
          child: Card(
            shadowColor: const Color(0XFF82B58D),
            shape: Border.all(
              color: const Color(0XFF82B58D),
              width: 2,
            ),
            elevation: 50,
            color: const Color(0XFF82B58D),
            child: Column(
              children: <Widget>[
                Image.asset(imgList[index]),
                SizedBox(
                  height: 200,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: const <Widget>[
                    Icon(
                      Icons.favorite,
                      color: Colors.white,
                      size: 25,
                    ),
                    Icon(
                      Icons.download,
                      color: Colors.white,
                      size: 25,
                    ),
                    Icon(
                      Icons.share,
                      color: Colors.white,
                      size: 25,
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      },
      itemCount: imgList.length,
    ),
  );
}

可以通过Stack组件将底部按钮行悬浮在列表内容上方，结合Positioned定位到底部区域，以下是修改后的完整代码：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('WinLife'),
      elevation: 10,
      backgroundColor: const Color(0XFF82B58D),
      leading: Container(
        padding: const EdgeInsets.all(5),
        child: Image.asset('assets/images/logo/WinLife.png'),
      ),
      actions: const <Widget>[
        IconButton(
          icon: Icon(Icons.favorite, color: Colors.white),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(Icons.settings, color: Colors.white),
          onPressed: () {},
        )
      ],
    ),
    body: Stack(
      children: [
        // 原有的列表内容
        ListView.builder(
          itemBuilder: (BuildContext ctx, int index) {
            return Padding(
              padding: const EdgeInsets.all(10),
              child: Card(
                shadowColor: const Color(0XFF82B58D),
                shape: Border.all(
                  color: const Color(0XFF82B58D),
                  width: 2,
                ),
                elevation: 50,
                color: const Color(0XFF82B58D),
                child: Column(
                  children: <Widget>[
                    Image.asset(imgList[index]),
                    const SizedBox(height: 200),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: const <Widget>[
                        Icon(Icons.favorite, color: Colors.white, size: 25),
                        Icon(Icons.download, color: Colors.white, size: 25),
                        Icon(Icons.share, color: Colors.white, size: 25),
                      ],
                    ),
                  ],
                ),
              ),
            );
          },
          itemCount: imgList.length,
        ),
        // 底部圆角按钮行
        Positioned(
          bottom: 20,
          left: 20,
          right: 20,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              OutlinedButton(
                onPressed: () {},
                style: OutlinedButton.styleFrom(
                  side: const BorderSide(color: Color(0XFF82B58D), width: 2),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 12),
                ),
                child: const Text('按钮1', style: TextStyle(color: Color(0XFF82B58D))),
              ),
              OutlinedButton(
                onPressed: () {},
                style: OutlinedButton.styleFrom(
                  side: const BorderSide(color: Color(0XFF82B58D), width: 2),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 12),
                ),
                child: const Text('按钮2', style: TextStyle(color: Color(0XFF82B58D))),
              ),
              OutlinedButton(
                onPressed: () {},
                style: OutlinedButton.styleFrom(
                  side: const BorderSide(color: Color(0XFF82B58D), width: 2),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 12),
                ),
                child: const Text('按钮3', style: TextStyle(color: Color(0XFF82B58D))),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

关键说明：

• Stack实现列表与按钮行的叠加布局，保证按钮悬浮在内容上方
• Positioned固定按钮行在屏幕底部，通过调整bottom/left/right参数控制边距，避免按钮贴边或被遮挡
• OutlinedButton的样式配置匹配原有AppBar的色调，通过RoundedRectangleBorder实现圆角效果

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