颤振- textfield覆盖的listview的最后一个元素

Question

我正在一个颤振应用程序中构建一个注释部分，其中有一个ListView，它在页面底部显示带有容器的所有注释，用户可以在其中键入并添加注释(见下图)，为此我使用了Stack和Align小部件，现在的问题是最后一个注释(如列表视图中的最后一个元素被输入字段所覆盖)。

我的问题是，解决这个UI错误的可能解决方案是什么？

下面是我正在使用的代码：

class _CommentsListState extends State<CommentsList> {

@override
Widget build(BuildContext context) {
  return Expanded(
    child: Stack(
      children: [
        FutureBuilder<QuerySnapshot>(
            future: commentGrabFtr,
            builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                  shrinkWrap: true,
                  reverse: false,
                  itemCount: snapshot.data.docs.length,
                  itemBuilder: (BuildContext context, int index) {
                    Comment comment = new Comment.fromMap(snapshot.data.docs[index].data());
                    _docUID = snapshot.data.docs[index].id;
                    return CommentCard(comment: comment,);
                  },
                );
              } else {
                return Center(
                  child: Image.asset('assets/images/nodata.png',),
                );
              }
            }),
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            color: Colors.white,
            padding: EdgeInsets.only(left: 10, right: 10, bottom: 12, top: 16),
            child: Material(
              color: Colors.blueGrey[50],
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              child: TextField(
                controller: _commentInputController,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 12.0),
                  border: InputBorder.none,
                  hintText: 'start typing...',
                  suffixIcon: IconButton(onPressed: () {}, icon: Icon(FeatherIcons.arrowRightCircle)),
                ),
              ),
            ),
          ),
        )
      ],
    ),
  );
}
}

这是输出：

​

​

Answer 1

使用Column而不是Stack

就像这样

@override
Widget build(BuildContext context) {
    return Expanded(
      child: Column(
        children: [
          Expanded(
            child: FutureBuilder<QuerySnapshot>(
                future: commentGrabFtr,
                builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                  if (snapshot.hasData) {
                    return ListView.builder(
                      shrinkWrap: true,
                      reverse: false,
                      itemCount: snapshot.data.docs.length,
                      itemBuilder: (BuildContext context, int index) {
                        Comment comment = new Comment.fromMap(
                            snapshot.data.docs[index].data());
                        _docUID = snapshot.data.docs[index].id;
                        return CommentCard(
                          comment: comment,
                        );
                      },
                    );
                  } else {
                    return Center(
                      child: Image.asset(
                        'assets/images/nodata.png',
                      ),
                    );
                  }
                }),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              color: Colors.white,
              padding:
                  EdgeInsets.only(left: 10, right: 10, bottom: 12, top: 16),
              child: Material(
                color: Colors.blueGrey[50],
                borderRadius: BorderRadius.all(Radius.circular(8.0)),
                child: TextField(
                  controller: _commentInputController,
                  decoration: InputDecoration(
                    contentPadding:
                        EdgeInsets.symmetric(horizontal: 8.0, vertical: 12.0),
                    border: InputBorder.none,
                    hintText: 'start typing...',
                    suffixIcon: IconButton(
                        onPressed: () {},
                        icon: Icon(FeatherIcons.arrowRightCircle)),
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }