在 TextForm 字段后显示图标

发布于:2024-10-10 ⋅ 阅读:(124) ⋅ 点赞:(0)

问题

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

网站公告

今日签到

点亮在社区的每一天
去签到