Flutter：如何修复多行启用文本字段底部的 SuffixIcon？

如何解决Flutter：如何修复多行启用文本字段底部的 SuffixIcon？

如何像 WhatsApp 一样修复 Multiline Enable TextField 底部的 SuffixIcon？

这是当前的场景：

这是我想要实现的：

我怎样才能做到这一点？

这是文本字段的代码：

Container(
        width: 350,padding: EdgeInsets.symmetric(horizontal: 15),decoration: Boxdecoration(
            color: Color(0xffEDEDED),borderRadius: BorderRadius.circular(20)),child: TextFormField(
          keyboardType: TextInputType.multiline,maxLines: null,decoration: Inputdecoration(
              border: InputBorder.none,hintText: 'Type here...',hintStyle: TextStyle(color: Color(0xff606060),fontSize: 12),suffixIcon: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,mainAxisSize: MainAxisSize.min,children: [
                  IconButton(
                      icon: Icon(Icons.camera_alt),onpressed: () {}),IconButton(
                      icon: Icon(Icons.send),onpressed: sendMessage),],)),),)

解决方法

你可以像下面这样将发送按钮放在 TextField 的底部：

TextFormField(
controller: cnt_msg,decoration: new InputDecoration(
  suffixIcon: InkWell(
      onTap: () {},child: Container(
          width: 50,alignment: Alignment.bottomCenter,height: 100,child: Icon(Icons.send,size: 25))),labelText: "Message",border: new OutlineInputBorder(
    borderRadius: new BorderRadius.circular(25.0),borderSide: new BorderSide(),),maxLines: 5,

)

应该尝试以下解决方案，这是不正确的，但您可以使用它来实现您的定位用户界面：

Container(
  width: 350,padding: EdgeInsets.symmetric(horizontal: 15),decoration: BoxDecoration(color: Color(0xffEDEDED),borderRadius: BorderRadius.circular(20)),child: Stack(children: [
    TextFormField(
      keyboardType: TextInputType.multiline,maxLines: null,decoration: InputDecoration(
        border: InputBorder.none,hintText: 'Type here...',hintStyle: TextStyle(color: Color(0xff606060),fontSize: 12),contentPadding: EdgeInsets.only(right: 90),Positioned(bottom: 0,right: 0,child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,mainAxisSize: MainAxisSize.min,children: [
        IconButton(icon: Icon(Icons.camera_alt),onPressed: () {}),IconButton(icon: Icon(Icons.send),],))

  ]),)

,

你可以试试这个方法，当添加多于一行时，容器大小会自动增加：

这个答案在某种程度上也是正确的

    Container(
       margin: EdgeInsets.symmetric(horizontal: 16.0),decoration: BoxDecoration(
         borderRadius:BorderRadius.all( Radius.circular(30.0)),color: Colors.grey
       ),child: Column(
          children: [

            TextField(
              keyboardType: TextInputType.multiline,Align(
              alignment: Alignment.bottomCenter,child: Row(
                mainAxisAlignment: MainAxisAlignment.end,children: [
                  Icon(Icons.camera_alt),SizedBox(width: 10.0,Icon(Icons.send),)

,

让我知道这有效。

Container(
              width: 350,decoration: BoxDecoration(
                  color: Color(0xffEDEDED),child: TextFormField(
                keyboardType: TextInputType.multiline,decoration: InputDecoration(
                    border: InputBorder.none,suffixIcon: Column(
                      mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.end,children: [
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.end,mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
                            IconButton(
                                icon: Icon(Icons.camera_alt),)),