问题
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(height: 40),
Row(
children: [
SizedBox(width: 8),
//MENU
Icon(
Icons.menu,
size: 34,
color: AppColors.black,
),
Spacer(),
//LOGO
SizedBox(
height: 60,
width: 100,
child: Image.asset(
'assets/icons/logo_transparent_main.png',
)),
SizedBox(width: 8)
],
),
//SEARCHBAR
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
// controller: textIDController,
style: const TextStyle(
color: Colors.black, fontWeight: FontWeight.w700),
decoration: InputDecoration(
suffixIcon: FaIcon(
Icons.filter_list_sharp,
size: 30,
color: AppColors.black,
),
labelText: "Search",
labelStyle: const TextStyle(
color: Colors.black, fontWeight: FontWeight.w700),
// fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
),
maxLines: 1,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
),
),
SizedBox(height: 10),
],
),
),
希望图标(在后缀为图标的搜索栏内)显示在搜索栏之后
以下是我尝试过但没有效果的方法:
1、当两者排成一行时,它不会显示出来
2、当我将行置于扩展状态时,出现同样的问题
3、Suffixicon 将图标放在边框内,我希望它位于边框外
4、我也尝试过用后缀代替后缀图标,但没有成功
解决方案
尝试下面的代码希望它对你有帮助。我刚刚更改了你的搜索栏小部件,如果你想显示你的后缀图标,只需将其添加到 texrfield 之后即可
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
// controller: textIDController,
style: const TextStyle(
color: Colors.black, fontWeight: FontWeight.w700),
decoration: InputDecoration(
// suffixIcon: Icon(
// Icons.filter_list_sharp,
// size: 30,
// color: Colors.black,
// ),
labelText: "Search",
labelStyle: const TextStyle(
color: Colors.black, fontWeight: FontWeight.w700),
// fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
),
maxLines: 1,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
),
),
),
SizedBox(width: 5,),// adjust width between search box and icon here as per your need
Icon(
Icons.filter_list_sharp,
size: 30,
color: Colors.black,
)
],
),
结果->
尝试用下面的方法替换你的 Padding 小部件
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: TextFormField(
// controller: textIDController,
style: const TextStyle(
color: Colors.black, fontWeight: FontWeight.w700),
decoration: InputDecoration(
suffixIcon: Icon(
Icons.filter_list_sharp,
size: 30,
color: Colors.black,
),
labelText: "Search",
labelStyle: const TextStyle(
color: Colors.black, fontWeight: FontWeight.w700),
// fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
),
maxLines: 1,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
),
),
Icon(
Icons.abc,
size: 50,
)
],
),
),