Home / Questions / 247183
Accepted
Roberto Hermosilla F
Asked: 2020-03-20 20:12:51 +0800 CST 2020-03-20 20:12:51 +0800 CST

如何在颤动中在页面底部插入文本表单字段

  • 772

我需要在页面底部插入一个文本表单字段，右侧有一个按钮。在此页面和构建小部件内部，我有一个固定大小的列表视图，我希望在最后输入一个文本。

在此处输入图像描述

@override
Widget build(BuildContext context) {
return new Scaffold(
    appBar: new AppBar(
      title: new Text("Mensajes de trabajo"),
      backgroundColor: Colors.deepOrange,
    ),
    body: Container(
      height: 450,
      child: FutureBuilder(
        future: _capturaComuna(),
        builder: (BuildContext context, AsyncSnapshot snapshot){
          if (snapshot.data == null){
            return Container(
              child: Center(
                child: Text("Cargando...")
              )
            );
          } else {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return Card(
                  child: ListTile(
                    leading: CircleAvatar(
                      backgroundImage: NetworkImage(snapshot.data[index].imagen_mensaje),
                    ),
                    title: new Text(snapshot.data[index].nombre_persona + '   ' + snapshot.data[index].fecha_mensaje),
                    subtitle: Text(snapshot.data[index].texto_mensaje),
                  )
                );
              },
            );
          }
        }
      )
    )
  );
}
flutter

1 Answers

  1. Best Answer

    在这里，我举了一个例子来说明它应该是怎样的，使用MediaQuery这样你就不必在 上放置固定大小Container，只需用你的快照替换。

      @override
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: new AppBar(
            title: new Text("Mensajes de trabajo"),
            backgroundColor: Colors.deepOrange,
          ),
          body: Container(
            height: MediaQuery.of(context).size.height,
            child: FutureBuilder(
                future: _capturaComuna(),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  if (snapshot.data == null) {
                    return Container(child: Center(child: Text("Cargando...")));
                  } else {
                    return Stack(
                      children: [
                        ListView.builder(
                          padding: EdgeInsets.only(bottom: 60),
                          itemCount: snapshot.data.length,
                          itemBuilder: (BuildContext context, int index) {
                            return Card(
                                child: ListTile(
                              title: new Text(snapshot.data[index]),
                              subtitle: Text(snapshot.data[index]),
                            ));
                          },
                        ),
                        Positioned(
                          bottom: 0.0,
                          left: 0.0,
                          right: 0.0,
                          child: Container(
                            color: Colors.white,
                            child: Row(
                              children: [
                                Expanded(
                                  child: Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: TextFormField(
                                      decoration: InputDecoration(
                                          hintText: "Ingresa texto aquí"),
                                    ),
                                  ),
                                ),
                                RaisedButton(
                                  child: Text("Enviar"),
                                  onPressed: () {},
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    );
                  }
                }),
          ));
    }

    有了这个，当键盘出现时，它会推动你的底栏，这样你就可以看到你在 TextField 中输入的内容。

    • 2