Flutter Stack 未对齐浮动操作按钮答案

【问题标题】：Flutter Stack not aligning floating action buttonFlutter Stack 未对齐浮动操作按钮
【发布时间】：2021-09-20 08:07:03
【问题描述】：

我正在制作一个带有几个按钮的列表视图。我使用堆栈小部件在 Listview 顶部放置两个浮动操作按钮。但是，我想将它们与列表视图的右下角和左下角对齐。我无法做到这一点，尽管我不明白为什么，但我们对齐小部件。请注意，我知道我可以在这里使用脚手架小部件，但这不是一个选项，因为 Listview 是 Scaffold 的子级。另外，我尝试过使用 Stack 的对齐属性，但它没有用。我希望你们能帮助解决这个问题：D 这是这里的代码：

  @override
  Widget build(BuildContext context) {
    @override
    void initState() {
      super.initState();
      written = [];
      read = [];
    }

    return Stack(
        //fit: StackFit.expand,
        alignment: AlignmentDirectional.bottomEnd,
        children: [
          ListView.separated(
              reverse: true,
              shrinkWrap: true,
              separatorBuilder: (context, i) => Container(
                    //color: Colors.greenAccent,
                    width: double.infinity,
                    height: 8,
                  ),
              itemCount: savedhistory.length,
              itemBuilder: (context, i) => Dismissible(
                    key: UniqueKey(),
                    onDismissed: (direction) {
                      setState(() {
                        savedhistory.removeAt(i);
                        updateString(i);
                      });
                    },
                    child: Container(
                      margin: EdgeInsets.all(10),
                      padding: EdgeInsets.all(5),
                      decoration: BoxDecoration(
                          color: Colors.grey,
                          borderRadius: BorderRadius.all(Radius.circular(20))),
                      child: savedhistory[i],
                      //padding: EdgeInsets.all(8.0),
                    ),
                    /* read == null
            ? []
            : read.map((e) => ExpansionTile(
                  title: Text(e),
                  subtitle: Text(e),
                )), */
                  )),
          Positioned(
              //alignment: Alignment.bottomRight,
              // child: GestureDetector(
              //     onLongPress: () => getString(),
              bottom: 50,
              right: 0,
              child: FloatingActionButton(
                  child: Icon(Icons.replay_outlined),
                  onPressed: getString,
                  backgroundColor: Colors.green[200])),
          Align(
            alignment: Alignment.bottomLeft,
            child: Container(
              child: FloatingActionButton(
                  child: Icon(Icons.download),
                  onPressed: addString,
                  backgroundColor: Colors.green[200]),
            ),
          )
        ]);
  }
}

使用定位后，似乎有一些空间超出了按钮被剪裁的位置，但我不明白为什么。 [1]：https://i.stack.imgur.com/bjrnL.png

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

尝试使用定位小部件：

stack(
  children[
    Positoned(
      bottom : 0
      left :1
      child: Container(
        /// YOUR CODE ///
            )
          )
        ]
    )

【讨论】：

嘿，我已经应用了您的解决方案，但问题仍然存在。似乎有一点空间可以放置按钮空间。除此之外，它会被剪掉。我不确定我明白为什么。我已将屏幕截图放在已编辑的问题中

【解决方案2】：

首先将stack 小部件的alignment 设置为bottomcenter，然后将Positoned() 用于第一个按钮小部件left: 0 和第二个按钮right:0

【讨论】：