[英]Flutter : How to Fix SuffixIcon at the bottom of the Multiline Enable TextField?
如何修復多行底部的 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),
],
)),
),
)
您可以執行以下操作將發送按鈕放在 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: () {}),
],))
]),
)
你可以試試這個方法,當多行添加時,容器大小會自動增加:
這個答案在某種程度上也是正確的
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,),
],
),
)
讓我知道這行得通。
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: () {}),
],
),
],
)),
),
),
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.