flutter textfiled填入内容

深碍√TFBOYSˉ_ 2021-06-12 14:52 347阅读 0赞

> 场景：在历史搜索过程中，点击某个搜索热点词，自动将该词填入，并进行搜索。

如下gif图：

![在这里插入图片描述][2019072509393228.gif]

这时候我们自动填充教师资格证的内容，然后可以进行删除重新操作等，此时用的不再是`hintText`这个属性，而是用`TextEditingController`来进行控制，

具体代码如下：

Widget searchBar() { 
        TextEditingController controller = TextEditingController.fromValue(
            TextEditingValue(
                text: _searchContent,
                selection: new TextSelection.fromPosition(TextPosition(
                    affinity: TextAffinity.downstream,
                    offset: _searchContent.length))));
    
        return Container(
          child: Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  alignment: Alignment.center,
                  child: Padding(
                    padding: EdgeInsets.only(left: 10),
                    child: TextField(
                      controller: controller,
                      decoration: InputDecoration(
                        hintText: "请输入想搜索的内容 $_searchContent",
                        border: InputBorder.none,
                      ),
                      onChanged: searchContentChange,
                      style:
                          TextStyle(color: MyColorRes.subTextColor, fontSize: 14),
                      onSubmitted: (content) { 
                        if (content.isNotEmpty) { 
                          print("content onSubmitted =============== $content");
                          _searchContent = content;
                          getSearchContentResult();
                        }else { 
                          ToastUtil.showBottomToast("请输入搜索内容");
                        }
                      },
                    ),
                  ),
                  decoration: BoxDecoration(
                    color: MyColorRes.divideLine,
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    border: Border.all(color: Colors.white, width: 1.0),
                  ),
                ),
                flex: 1,
              ),
              Container(
                margin: const EdgeInsets.only(right: 10, left: 10),
                child: InkWell(
                  onTap: () { 
                    Application.router.pop(context);
                  },
                  child: Text(
                    "取消",
                    style: TextStyle(color: Colors.black, fontSize: 16),
                  ),
                ),
              )
            ],
          ),
          height: 40.0,
        );
      }

主要是用到了`TextEditingController.fromValue`这个功能。

[2019072509393228.gif]: /images/20210529/89b099813cf845aca082487968355661.png