如何在SingleChildScrollView的Column内放置右下角按钮？

我想在SingleChildScrollView包含的Column组件内放置一个右下角按钮，之前尝试用Spacer（但SingleChildScrollView中无法使用Spacer）和Row的MainAxisAlignment.end属性，没能实现预期效果。以下是我的代码片段：

Widget build(BuildContext context) {
    double altezza = MediaQuery.of(context).size.height;
    return SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              altezza > 750 && valoreCheckAbbuonoOre == false
                  ? SizedBox(height: altezza / 9)
                  : altezza > 750 && valoreCheckAbbuonoOre == true
                      ? SizedBox(height: altezza / 11)
                      : SizedBox(height: altezza / 15),
              Text("Rapporto di $meseAttuale $annoAttuale",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 21)),
              SizedBox(height: 20),
              GestureDetector(
                onTap: () {
                  click(1);
                },
                child: Text("Visualizza rapporto precedente",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                        color: Colors.blue[900])),
              ),
              SizedBox(height: 20),
              TabellaStatica(visualizzaRapporto, "attuale"),
              SizedBox(height: 20),
          Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              MaterialButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) =>
                            AggiungiServizio(visualizzaRapporto)),
                  );
                },
                shape: CircleBorder(),
                color: Colors.blue[900],
                padding: EdgeInsets.all(10),
                child: const Icon(
                  Icons.add,
                  size: 30,
                  color: Colors.white,

（注：代码移除了部分大括号等内容）

方法一：悬浮固定按钮（不随滚动移动） #

用Stack将按钮放在SingleChildScrollView上方，固定在屏幕右下角，适合需要始终可见的操作按钮：

Widget build(BuildContext context) {
  double altezza = MediaQuery.of(context).size.height;
  return Stack(
    children: [
      // 原有的滚动内容
      SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            altezza > 750 && valoreCheckAbbuonoOre == false
                ? SizedBox(height: altezza / 9)
                : altezza > 750 && valoreCheckAbbuonoOre == true
                    ? SizedBox(height: altezza / 11)
                    : SizedBox(height: altezza / 15),
            Text("Rapporto di $meseAttuale $annoAttuale",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 21)),
            SizedBox(height: 20),
            GestureDetector(
              onTap: () => click(1),
              child: Text("Visualizza rapporto precedente",
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                      color: Colors.blue[900])),
            ),
            SizedBox(height: 20),
            TabellaStatica(visualizzaRapporto, "attuale"),
            SizedBox(height: 20),
          ],
        ),
      ),
      // 右下角悬浮按钮
      Positioned(
        bottom: 20,
        right: 20,
        child: MaterialButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => AggiungiServizio(visualizzaRapporto)),
            );
          },
          shape: CircleBorder(),
          color: Colors.blue[900],
          padding: EdgeInsets.all(10),
          child: const Icon(Icons.add, size: 30, color: Colors.white),
        ),
      ),
    ],
  );
}

方法二：随内容滚动的底部按钮 #

如果希望按钮在内容未占满屏幕时固定在底部，内容过长时随滚动条移动到页面底部，可以用Column+Expanded包裹SingleChildScrollView：

Widget build(BuildContext context) {
  double altezza = MediaQuery.of(context).size.height;
  return Column(
    children: [
      // 滚动内容占满剩余空间
      Expanded(
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              altezza > 750 && valoreCheckAbbuonoOre == false
                  ? SizedBox(height: altezza / 9)
                  : altezza > 750 && valoreCheckAbbuonoOre == true
                      ? SizedBox(height: altezza / 11)
                      : SizedBox(height: altezza / 15),
              Text("Rapporto di $meseAttuale $annoAttuale",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 21)),
              SizedBox(height: 20),
              GestureDetector(
                onTap: () => click(1),
                child: Text("Visualizza rapporto precedente",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                        color: Colors.blue[900])),
              ),
              SizedBox(height: 20),
              TabellaStatica(visualizzaRapporto, "attuale"),
              SizedBox(height: 20),
            ],
          ),
        ),
      ),
      // 右下角按钮
      Align(
        alignment: Alignment.bottomRight,
        child: Padding(
          padding: EdgeInsets.only(right: 20, bottom: 20),
          child: MaterialButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => AggiungiServizio(visualizzaRapporto)),
              );
            },
            shape: CircleBorder(),
            color: Colors.blue[900],
            padding: EdgeInsets.all(10),
            child: const Icon(Icons.add, size: 30, color: Colors.white),
          ),
        ),
      ),
    ],
  );
}

两种方法的适用场景 #

• 方法一：按钮始终悬浮在屏幕右下角，不随内容滚动，适合需要用户随时能点击的操作入口（比如添加、编辑按钮）。
• 方法二：按钮位置随内容长度变化，内容短则固定在屏幕底部，内容长则跟随到页面底部，适合操作需和内容关联的场景。

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