Flutter:将textField放置在支架底部

mzaanser  于 2022-11-17  发布在  Flutter
关注(0)|答案(3)|浏览(190)

这让我很头疼,我只是想在屏幕底部放一个文本字段。我有下面的代码,试着把它 Package 在一个Positioned中:

return Scaffold(

              //set a textField to add a reply

              appBar: TopAppBar(title: 'bruh'),
              body: SingleChildScrollView(
                controller: _scrollController,
                child: Column(
                  children: [
                    FocalWaveTile(
                      wave: widget.waveTile.wave,
                      user: profileState.user,
                      poster: widget.waveTile.poster,
                    ),
                    ListView.builder(
                      shrinkWrap: true,
                      itemCount: waves.length,
                      itemBuilder: (BuildContext context, int index) {
                        
                      },
                    ),
                    //poisition on the bottom
                    Positioned(
                      bottom: MediaQuery.of(context).viewInsets.bottom,
                      child: Container(
                        height: 50,
                        width: MediaQuery.of(context).size.width,
                        color: Colors.white,
                        child: Row(
                          children: [
                            Expanded(
                              child: Container(
                                margin: EdgeInsets.only(left: 10),
                                child: TextField(
                                  decoration: InputDecoration(
                                      hintText: 'Reply to this wave'),
                                  onChanged: (value) {
                                    if (value.length > 0) {
                                      setState(() {
                                        isTyping = true;
                                      });
                                    } else {
                                      setState(() {
                                        isTyping = false;
                                      });
                                    }
                                  },
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ));

它看起来像这样:

知道我做错了什么吗?我试过一些东西,比如底部导航栏和添加一个间隔,但是这两个都不能以我也希望的方式工作。谢谢!

s6fujrry

s6fujrry1#

试试这个:

return Scaffold(
  //set a textField to add a reply

  appBar: TopAppBar(title: 'bruh'),
  body: Stack(
    children: [
      SingleChildScrollView(
        controller: _scrollController,
        child: Column(
          children: [
            FocalWaveTile(
              wave: widget.waveTile.wave,
              user: profileState.user,
              poster: widget.waveTile.poster,
            ),
            ListView.builder(
              shrinkWrap: true,
              itemCount: waves.length,
              itemBuilder: (BuildContext context, int index) {},
            ),
            //poisition on the bottom
          ],
        ),
      ),
      Positioned(
        bottom: MediaQuery.of(context).viewInsets.bottom,
        child: Container(
          height: 50,
          width: MediaQuery.of(context).size.width,
          color: Colors.white,
          child: Row(
            children: [
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(left: 10),
                  child: TextField(
                    decoration:
                        InputDecoration(hintText: 'Reply to this wave'),
                    onChanged: (value) {
                      if (value.length > 0) {
                        setState(() {
                          isTyping = true;
                        });
                      } else {
                        setState(() {
                          isTyping = false;
                        });
                      }
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      )
    ],
  ),
);
xtfmy6hx

xtfmy6hx2#

您可以从Scaffold使用bottomNavigationBar

Scaffold(
  bottomNavigationBar: TextFormField(),
oug3syen

oug3syen3#

感谢大家的帮助,但是出于某种原因,用Listview替换singleChildScrollView就解决了这个问题

相关问题