Flutter TextField:如何在右侧添加图标
Flutter TextField:如何在右侧添加图标
提问于 2020-12-03 04:45:13
在TextField窗口小部件的InputDecoration部分，只有左边的图标可用(我的意思是在文本字段之外，而不是后缀)
如何在right TextField中添加图标？
对于use Row这是另一个问题：
body: Column(
children: [
Expanded(
child: ListView(
children: [
Text("Hi")
],
),
),
Expanded(
child: Row(
children: [
TextField(
style: TextStyle(
backgroundColor: Color.fromRGBO(118, 118, 128, 0.35),
),
decoration: InputDecoration(
hintText: "Message",
filled: true,
fillColor: Color.fromRGBO(235, 235, 245, 0.6),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
],
)),
],
),回答 3
Stack Overflow用户
回答已采纳
发布于 2020-12-03 06:38:43
您可以创建自定义Textfield，如以下代码所示：
Container(
child: Row(
children: [Flexible(child: TextField()), Icon(Icons.add)],
)),Stack Overflow用户
发布于 2020-12-03 09:42:06
为什么你首先需要Expanded？但如果这是必须的，我认为你可以这样做：
return Scaffold(
body: Column(
children: [
Expanded(
child: ListView(
children: [
Text("Hi")
],
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: MediaQuery.of(context).size.width - 50,
height: 35,
child: TextField(
style: TextStyle(
backgroundColor: Color.fromRGBO(118, 118, 128, 0.35),
),
decoration: InputDecoration(
hintText: "Message",
filled: true,
fillColor: Color.fromRGBO(235, 235, 245, 0.6),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
),
Icon(Icons.add_a_photo, size: 25)
],
)
),
],
),
);您的代码给出一个错误，因为Textfield需要大小。
Stack Overflow用户
发布于 2020-12-03 04:52:16
执行以下操作：
Row(
children: [
Flexible(
child: TextField(
style: TextStyle(
backgroundColor: Color.fromRGBO(118, 118, 128, 0.35),
),
decoration: InputDecoration(
hintText: "Message",
filled: true,
fillColor: Color.fromRGBO(235, 235, 245, 0.6),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
),
SizedBox(width: 10.0),
Icon(Icons.settings),
],
),使用Flexible小部件限制TextField是必需的。Flexible代表TextField，就像MainAxisSize.min代表Column一样。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65115854
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号