Dart 带高度的容器上带有图标的颤振TextFormField

我试图重新创建这个搜索输入，但我在保持它的小问题，如果我添加前缀的高度增加，我似乎无法控制它

这是我现在拥有的。 我之所以使用行，是因为我还需要在输入字段后添加一个按钮，但这是为了以后使用。

Widget\u buildSearch（）=>容器(
填充：边缘设置。全部（8.0），
颜色：颜色（0xFF131313），
身高：50.0，
孩子：排(
儿童：[
灵活的(
弹性：2，
子项：TextFormField(
textAlign:textAlign.left，
样式：TextStyle（fontSize:11.0），
装饰：输入装饰(
contentPadding:新边集。对称（垂直：0.0），
边框：InputBorder.none，
前缀：填充(
填充：所有边缘设置（0.0），
子：图标(
Icons.search，
颜色：颜色。灰色，
)，//图标是48px小部件。
),
hintText:“搜索艺术家、流派、播放列表”，
hintStyle:TextStyle（fontSize:11.0）），
),
),
],
),
);

您可以像这样调整图像大小

prefixIcon: new Padding(
   padding: const EdgeInsets.only( top: 15, left: 5, right: 0, bottom: 15),
   child: new SizedBox(
            height: 4,
            child: Image.asset(imgname),
   ),
),

---

您可以将

height

添加到

hintStyle

中以避免此问题：

hintStyle: TextStyle(fontSize: 11.0, color: Colors.white, height: 3),

关于：

此文本跨度的高度，是字体大小的倍数

当高度为空或省略时，线条高度将由 字体的度量直接与字体大小不同。什么时候 高度为非空，文本跨度的行高度为a fontSize和be的倍数正好是fontSize*高度逻辑像素 高

你可以这样用

 decoration: InputDecoration(
                  contentPadding: EdgeInsets.only(top:20),
                  border: InputBorder.none,
                  hintStyle: TextStyle(
                    fontFamily: AppTheme.fontName,
                    fontWeight: FontWeight.w600,
                    fontSize: 16,
                    color: AppTheme.deactivatedText,
                  ),

---

调整文本字段的内容填充，并将图标包装在填充小部件中，因为它的输入类型是小部件

TextField(
      decoration: InputDecoration(
          contentPadding: EdgeInsets.only(top: 20), // add padding to adjust text
          isDense: true,
          hintText: "Email",
          prefixIcon: Padding(
            padding: EdgeInsets.only(top: 15), // add padding to adjust icon
            child: Icon(Icons.help_outline),
          ),

    );

这是上述代码的输出

---

您可以使用ListTile，图标放在前导，TextFormField放在标题中。

不要使用

前缀属性如果您想控制详细信息，它没有用

我就是这么做的：

容器(
填充：常量边集。对称（水平：8.0），
身高：50.0，
颜色：常量颜色（0xff131313），
孩子：排(
mainAxisSize:mainAxisSize.max，
mainAxisAlignment:mainAxisAlignment.start，
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
填充物(
填充：常量边集全部（0.0），
子：图标(
Icons.search，
颜色：颜色。灰色，
),
),
灵活的(
子项：TextFormField(
装饰：输入装饰(
contentPadding:const EdgeInsets.all（0.0），
hintText:“搜索艺术家、流派、播放列表”，
hintStyle:TextStyle(
颜色：颜色，白色，
字体大小：11.0，
),
边框：InputBorder.none，
),
样式：TextStyle(
颜色：颜色，白色，
字体大小：11.0，
),
),
),
],
),
),


第一个来自我的代码，第二个来自你的代码。你可以随意改变填充物。
使用这种方法，我想你会喜欢的，
Use this method i think u like it,
you just have to add the FocusNode and controller by urself...

Padding(
          padding: EdgeInsets.only(
              left: parentWidth * .04,
              right: parentWidth * .04,
              top: parentHeight * .02,
              bottom: parentHeight * .02),
          child: Container(
            padding: EdgeInsets.only(
                left: parentWidth * .05, right: parentWidth * .05),
            decoration: new BoxDecoration(
                color: Colors.white,
                borderRadius: new BorderRadius.all(new Radius.circular(25.0))),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Flexible(
                  child: TextFormField(
                    focusNode: _searchingFocus,
                    textCapitalization: TextCapitalization.words,
                    controller: _searchController,
                    obscureText: false,
                    onFieldSubmitted: (term) {
                      _searchingFocus.unfocus();
                    },
                    // controller: _isSearching,
                    decoration: InputDecoration(
                        contentPadding: EdgeInsets.all(0.0),
                        border: InputBorder.none,
                        hintText: StringEn.ALL_CATEGORY_TEXT,
                        hintStyle: new TextStyle(
                            color: CommonColor.MENU_BTN_COLOR.withOpacity(.4),
                            fontSize: categoryText - 4,
                            fontFamily: CommonWidget.AVENIR_BOOK)),
                    style: new TextStyle(
                        color: CommonColor.MENU_BTN_COLOR,
                        fontSize: categoryText - 3,
                        fontFamily: CommonWidget.AVENIR_BOOK),
                  ),
                ),
                Padding(
                  padding: new EdgeInsets.only(left: parentWidth * 0.0),
                  child: new Icon(
                    Icons.search,
                    color: Colors.grey,
                    size: parentWidth * 0.06,
                  ),
                ),
              ],
            ),
          ),
        ),

您只需自行添加FocusNode和控制器。。。
填充物(
填充：仅限边缘设置(
左：parentWidth*.04，
右：parentWidth*.04，
顶部：parentHeight*.02，
底部：父母身高*.02），
子：容器(
填充：仅限边缘设置(
左：parentWidth*.05，右：parentWidth*.05），
装饰：新盒子装饰(
颜色：颜色，白色，
borderRadius:新的borderRadius.all（新半径.圆形（25.0）），
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
灵活的(
子项：TextFormField(
focusNode:\u searchingFocus，
textcapitalize:textcapitalize.words，
控制器：\ u搜索控制器，
模糊文本：false，
已提交：（任期）{
_searchingFocus.unfocus（）；
},
//控制器：\正在搜索，
装饰：输入装饰(
contentPadding:EdgeInsets.all（0.0），
边框：InputBorder.none，
hintText:StringEn.ALL_CATEGORY_TEXT，
hintStyle：新的文本样式(
颜色：CommonColor.MENU_BTN_color.withOpacity（.4），
fontSize:categoryText-4，
fontFamily:CommonWidget.AVENIR_BOOK），
样式：新文本样式(
颜色：CommonColor.MENU\u BTN\u颜色，
fontSize:categoryText-3，
fontFamily:CommonWidget.AVENIR_BOOK），
),
),
填充物(
填充：仅限新边集（左：parentWidth*0.0），
孩子：新图标(
Icons.search，
颜色：颜色。灰色，
大小：parentWidth*0.06，
),
),
],
),
),
),
你好！您可以尝试在同一行中使用图标小部件。做到了，谢谢。。。感觉很灵活（flex:2，这可能是一个问题
前缀
，而不是
前缀
。这比
Use this method i think u like it,
you just have to add the FocusNode and controller by urself...

Padding(
          padding: EdgeInsets.only(
              left: parentWidth * .04,
              right: parentWidth * .04,
              top: parentHeight * .02,
              bottom: parentHeight * .02),
          child: Container(
            padding: EdgeInsets.only(
                left: parentWidth * .05, right: parentWidth * .05),
            decoration: new BoxDecoration(
                color: Colors.white,
                borderRadius: new BorderRadius.all(new Radius.circular(25.0))),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Flexible(
                  child: TextFormField(
                    focusNode: _searchingFocus,
                    textCapitalization: TextCapitalization.words,
                    controller: _searchController,
                    obscureText: false,
                    onFieldSubmitted: (term) {
                      _searchingFocus.unfocus();
                    },
                    // controller: _isSearching,
                    decoration: InputDecoration(
                        contentPadding: EdgeInsets.all(0.0),
                        border: InputBorder.none,
                        hintText: StringEn.ALL_CATEGORY_TEXT,
                        hintStyle: new TextStyle(
                            color: CommonColor.MENU_BTN_COLOR.withOpacity(.4),
                            fontSize: categoryText - 4,
                            fontFamily: CommonWidget.AVENIR_BOOK)),
                    style: new TextStyle(
                        color: CommonColor.MENU_BTN_COLOR,
                        fontSize: categoryText - 3,
                        fontFamily: CommonWidget.AVENIR_BOOK),
                  ),
                ),
                Padding(
                  padding: new EdgeInsets.only(left: parentWidth * 0.0),
                  child: new Icon(
                    Icons.search,
                    color: Colors.grey,
                    size: parentWidth * 0.06,
                  ),
                ),
              ],
            ),
          ),
        ),