我怎样才能在Flutter结束时制造FAB?

z31licg0  于 2023-02-25  发布在  Flutter
关注(0)|答案(2)|浏览(141)

我正在用flutter制作一个聊天应用程序,我创建了一个消息框,当文本框中的文本变长时,FAB会从它的位置移动。

Padding(
            padding: const EdgeInsets.all(10.0),
            child: Expanded(
              child: Container(
                alignment: AlignmentDirectional.bottomEnd,
                padding: EdgeInsets.only(right: 6, left: 10),
                decoration: BoxDecoration(
                    color: Colors.grey.shade700,
                    borderRadius: BorderRadius.circular(16)),
                child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                        controller: _textController,
                        keyboardType: TextInputType.multiline,
                        minLines: 1,
                        maxLines: 20,
                        decoration: InputDecoration(
                          hintText: "Message...",
                          border: InputBorder.none,
                        ),
                      ),
                    ),
                    FloatingActionButton(
                      mini: true,
                      elevation: 0,
                      onPressed: () {},
                      child: const Icon(
                        Icons.send,
                        color: Colors.white,
                      ),
                    )

我希望这个浮动的操作按钮在底部。但是当文本在消息框中变长。按钮也从它的位置移动。

rwqw0loc

rwqw0loc1#

尝试在行内将crossAxisAligment设置为CrossAxisAligment.end。

Row(
crossAxisAlignment: CrossAxisAlignment.end,
vqlkdk9b

vqlkdk9b2#

请尝试此代码。

Row(
    crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Expanded(
          child: TextField(
                    controller: _textController,
                    keyboardType: TextInputType.multiline,
                    minLines: 1,
                    maxLines: 20,
                    decoration: InputDecoration(
                      hintText: "Message...",
                      border: InputBorder.none,
                    ),
                  ),
                ),
                FloatingActionButton(
                  mini: true,
                  elevation: 0,
                  onPressed: () {},
                  child: const Icon(
                    Icons.send,
                    color: Colors.white,
                  ),
                )

相关问题