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

Question

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

这是当前场景：

这是我想要实现的目标：

我怎样才能做到这一点？

这是文本字段的代码：

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),
                ],
              )),
        ),
      )

Answer 1

您可以执行以下操作将发送按钮放在 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,

)

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

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), onPressed: () {}),
      ],))

  ]),
)

Answer 2

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

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

    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,
              maxLines: null,

            ),

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


                ],
              ),
            ),
            SizedBox(width: 10.0,),

          ],
        ),


      )

Answer 3

让我知道这行得通。

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: Column(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            IconButton(
                                icon: Icon(Icons.camera_alt), onPressed: () {}),
                            IconButton(icon: Icon(Icons.send), onPressed: () {}),
                          ],
                        ),
                      ],
                    )),
              ),
            ),