Question

我试图做显示注释页面的设计。我需要进行如下页面设计：在顶部列出，然后在底部显示文本字段。这样用户可以看到所有评论并发送新评论。像照片一样的东西：

但是我在显示上也有同样的问题。

这是我的代码：我现在是这样的，但是现在我可以看到列表，只是底部没有文本字段


  @override
    Widget build(BuildContext context) {
      return FutureBuilder<List<Flowerdata>>(
        future: fetchFlowers(),
        builder: (context, snapshot) {

          if (!snapshot.hasData) return Center(
              child: CircularProgressIndicator()
          );

          return ListView(

            children: snapshot.data
                .map((data) => Column(children: <Widget>[

              GestureDetector(
                onTap: ()=>{
                  getItemAndNavigate(data.id, context)
                },
                child: Row(
                    children: [
                      Container(
                          width: 100,
                          height: 100,
                          margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                          child: ClipRRect(
                              borderRadius: BorderRadius.circular(8.0),
                              child:
                              Image.network(data.flowerImageURL,
                                width: 200, height: 100, fit: BoxFit.cover,))),

                      Flexible(child:
                      Text(data.flowerName,
                          style: TextStyle(fontSize: 18))
                      ),

                    ]),),

              Divider(color: Colors.black),

            ],))
                .toList(),

          );

          Container(
              width: 280,
              padding: EdgeInsets.all(10.0),
              child: TextField(
                controller: naameController,
                autocorrect: true,
                decoration: InputDecoration(hintText: 'Enter Your Name Here'),
              )
          );

        },

      );

  }

如何正确安排物品？

Answer 1

您将在返回ListView之后将TextField放置在该位置，这使它成为无效代码。您可以将其添加到ListView子级列表的末尾，也可以在外部放置一个Stack，以将ListView和TextField都放置在其中。

Answer 2

首先，您的Container小部件无法访问，应对其进行修复，然后在给定{{1之后，可以用Column包装小部件，并用ListView包装Expanded小部件}}到height。它将解决您的问题。

但是我对Container有一些建议。为什么不使用ListView？如果您使用ListView.separated方法，则可以删除separated和您的map。

另外，当我查看您的设计时，您的列表项看起来像卡。您可以使用Divider旁边的Card小部件。

我希望这会对您有所帮助，否则我会很乐意帮助您。

编辑：这是基于您的问题和我的答案的示例代码；

GestureDetector

如何正确摆放物品

2 个答案: