Question

我正在尝试重新创建此搜索输入，但是在保持其较小的尺寸方面遇到了麻烦，如果添加prefixIcon，则高度会增加，但似乎无法控制它。

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

Widget _buildSearch() => Container(
          padding: EdgeInsets.all(8.0),
          color: Color(0xFF131313),
          height: 50.0,
          child: Row(
            children: <Widget>[
              Flexible(
                flex: 2,
                child: TextFormField(
                  textAlign: TextAlign.left,
                  style: TextStyle(fontSize: 11.0),
                  decoration: InputDecoration(
                      contentPadding: new EdgeInsets.symmetric(vertical: 0.0),
                      border: InputBorder.none,
                      prefixIcon: Padding(
                        padding: EdgeInsets.all(0.0),
                        child: Icon(
                          Icons.search,
                          color: Colors.grey,
                        ), // icon is 48px widget.
                      ),
                      hintText: 'Search artist, genre, playlist',
                      hintStyle: TextStyle(fontSize: 11.0)),
                ),
              ),
            ],
          ),
        );

Answer 1

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

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

    );

这是上面代码的输出

Answer 2

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

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

Answer 3

您可以将height添加到hintStyle中来避免这种情况：

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

关于height中的TextStyle：

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

当height为null或省略时，行高将由直接显示字体的指标，该指标可能与fontSize不同。什么时候如果height为非null，则文本跨度的行高将为 fontSize的倍数，精确为fontSize *高度逻辑像素高

Answer 4

您可以这样使用

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

Answer 5

您可以使用 ListTile ，将其放置在 Leading 中的图标将 TextFormField 放置在 Title 中。

Answer 6

如果您想控制细节，请不要使用prefixIcon属性，这没有用。

这就是我所做的：

Container(
  padding: const EdgeInsets.symmetric(horizontal: 8.0),
  height: 50.0,
  color: const Color(0xff131313),
  child: Row(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(0.0),
        child: Icon(
          Icons.search,
          color: Colors.grey,
        ),
      ),
      Flexible(
        child: TextFormField(
          decoration: InputDecoration(
            contentPadding: const EdgeInsets.all(0.0),
            hintText: 'Search artist, genre, playlist',
            hintStyle: TextStyle(
              color: Colors.white,
              fontSize: 11.0,
            ),
            border: InputBorder.none,
          ),
          style: TextStyle(
            color: Colors.white,
            fontSize: 11.0,
          ),
        ),
      ),
    ],
  ),
),

第一个来自我的代码，第二个来自你的代码。您可以根据需要更改填充。

Answer 7

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

带有容器高度的图标上的Flutter TextFormField

7 个答案: