Question

我正在制作一个带有几个按钮的列表视图。我使用了一个堆栈小部件在 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

Answer 1

尝试使用定位小部件：

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

Answer 2

首先将 let timeThing = {} timeThing.timer = (time) => setTimeout(() => console.log('I arrived'), time); timeThing.timer(5_000); 小部件的 stack 设置为 alignment，然后将 bottomcenter 用于带有 Positoned() 的第一个按钮小部件和第二个按钮 left: 0< /p>

Answer 3

将 clipBehavior 设置为 Clip.none

Stack(
          clipBehavior: Clip.none,
          children: []
);

Flutter Stack 未对齐浮动操作按钮

3 个答案: