问题
Expanded(child: Column(mainAxisAlignment: MainAxisAlignment.start,children: [SizedBox(height: 40),Row(children: [SizedBox(width: 8),//MENUIcon(Icons.menu,size: 34,color: AppColors.black,),Spacer(),//LOGOSizedBox(height: 60,width: 100,child: Image.asset('assets/icons/logo_transparent_main.png',)),SizedBox(width: 8)],),//SEARCHBARPadding(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 needIcon(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,)],),),