Question

我正在构建一个聊天应用程序。

我在该列上有2个项目。第一个是信息卡，它位于页面顶部，

我也有一个文本框，但是我不知道如何将其放在底部中心。

这是出现问题的主要代码：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      resizeToAvoidBottomPadding: true,
      appBar: userMessageChatAppBar(context),
      body: SingleChildScrollView(
        child: Column(
          children: [
            userMessageChatInformationCard(context),
            Positioned(
              bottom: 20,
            child: userMessageChatTextField())
          ],
        ),
      ),
    );

将发生聊天的TextField：

Padding userMessageChatTextField() {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: TextField(
          decoration: InputDecoration(
        suffixIcon: RaisedButton.icon(
          onPressed: () {},
          icon: Icon(
            Icons.send,
            color: Colors.white,
          ),
          color: Colors.blue,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(20))),
          label: Text(
            "19.99₺",
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
        ),
        hintText: "Bir şeyler yaz",
        border: new OutlineInputBorder(
            borderSide: new BorderSide(color: Colors.teal)),
      )),
    );}

用户首次看到的信息卡：

Align userMessageChatInformationCard(BuildContext context) {
    return Align(
            alignment: Alignment.center,
            child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Container(
                  decoration: new BoxDecoration(
                    boxShadow: [
                      new BoxShadow(
                        color: Colors.grey,
                        blurRadius: 10.0,
                      ),
                    ],
                  ),
                  child: Card(
                    clipBehavior: Clip.antiAlias,
                    child: Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Text(
                            'fernando muslera mesajını bekliyor',textAlign: TextAlign.center,
                            style: TextStyle(fontSize: 20.0, color: Colors.blueGrey),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(left: 20,right: 20,bottom: 20),
                          child: Text(
                            '280 karakterlik mesaj için ödeme yaparsın ünlünün mesajı alabilmesi uzun sürebilir',
                            textAlign: TextAlign.center, style: TextStyle(
                                color: Colors.black.withOpacity(0.6)),
                          ),
                        ),                      
                      ],
                    ),
                  ),
                )));
  }

Answer 1

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      resizeToAvoidBottomPadding: true,
      appBar: userMessageChatAppBar(context),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          userMessageChatInformationCard(context),
          userMessageChatTextField()
        ],
      ),
   );
 }

Flutter：如何将文本字段与列的底部中心对齐？

1 个答案: