blocks|key|3949657|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3949658|Widget+_searchBox()+{
++++return+TextField(
++++++controller:+_searchController,
++++++decoration:+InputDecoration(
++++++++labelText:+"Search",
++++++++hintText:+"Search",
++++++++prefixIcon:+Icon(Icons.search,color:+Colors.white,),

++++++++suffix:+InkWell(

++++++++++child:+Icon(Icons.clear),
++++++++++onPressed:+()+=>+_searchController.clear(),
++++++++),
++++++++border:+OutlineInputBorder(
++++++++++borderRadius:+BorderRadius.all(
++++++++++++Radius.circular(10.0),
++++++++++),
++++++++),
++++++),
++++);
++}|code-block|syntax|javascript|3949659|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try: 

<pre><code>Widget _searchBox() {
 return TextField(
 controller: _searchController,
 decoration: InputDecoration(
 labelText: "Search",
 hintText: "Search",
 prefixIcon: Icon(Icons.search,color: Colors.white,),

 suffix: InkWell(

 child: Icon(Icons.clear),
 onPressed: () =&gt; _searchController.clear(),
 ),
 border: OutlineInputBorder(
 borderRadius: BorderRadius.all(
 Radius.circular(10.0),
 ),
 ),
 ),
 );
 }
</code></pre>

blocks|key|3949685|text|请改用suffixIcon。要根据状态更新图标，您需要在某个地方调用setState。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3949686|试试这个：|3949687|import+'package:flutter/material.dart';

class+SearchWidget+extends+StatefulWidget+{


++@override
++_SearchWidgetState+createState()+=>+_SearchWidgetState();
}

class+_SearchWidgetState+extends+State<SearchWidget>+{
++String+_searchText+=+"";
++TextEditingController+_searchController;
++@override
++Widget+build(BuildContext+context)+{
++++++return+TextField(
++++++++controller:+_searchController,
++++++++decoration:+InputDecoration(
++++++++++labelText:+"Search",
++++++++++hintText:+"Search",
++++++++++prefixIcon:+Icon(Icons.search,color:+Colors.white,),

++++++++++suffixIcon:+_searchText.isNotEmpty+?+IconButton(icon:+Icon(Icons.clear),onPressed:+()+{
++++++++++++setState(()+{
++++++++++++++_searchController.clear();
++++++++++++});},)+:+null,
++++++++++border:+OutlineInputBorder(
++++++++++++borderRadius:+BorderRadius.all(
++++++++++++++Radius.circular(10.0),
++++++++++++),
++++++++++),
++++++++),
++++++);
++++}

++@override
++void+initState()+{
++++super.initState();
++++_searchController+=+TextEditingController();
++++_searchController.addListener(()+{
++++++setState(()+{
++++++++_searchText+=+_searchController.text;
++++++});
++++});
++}

++@override
++void+dispose()+{
++++++_searchController.dispose();
++++++super.dispose();
++}
}|code-block|syntax|javascript|3949688|编辑:别忘了处理|3949689|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Use suffixIcon instead. To update the icon depending on the state you need to call setState somewhere.

Try this:

<pre><code>import 'package:flutter/material.dart';

class SearchWidget extends StatefulWidget {


 @override
 _SearchWidgetState createState() =&gt; _SearchWidgetState();
}

class _SearchWidgetState extends State&lt;SearchWidget&gt; {
 String _searchText = "";
 TextEditingController _searchController;
 @override
 Widget build(BuildContext context) {
 return TextField(
 controller: _searchController,
 decoration: InputDecoration(
 labelText: "Search",
 hintText: "Search",
 prefixIcon: Icon(Icons.search,color: Colors.white,),

 suffixIcon: _searchText.isNotEmpty ? IconButton(icon: Icon(Icons.clear),onPressed: () {
 setState(() {
 _searchController.clear();
 });},) : null,
 border: OutlineInputBorder(
 borderRadius: BorderRadius.all(
 Radius.circular(10.0),
 ),
 ),
 ),
 );
 }

 @override
 void initState() {
 super.initState();
 _searchController = TextEditingController();
 _searchController.addListener(() {
 setState(() {
 _searchText = _searchController.text;
 });
 });
 }

 @override
 void dispose() {
 _searchController.dispose();
 super.dispose();
 }
}
</code></pre>

Edit: don't forget to dispose

blocks|key|3949728|text|我最终使用了两个答案中的想法。一个没有解释如何显示和隐藏图标，而另一个似乎太复杂了。我所做的就是_searchController.text.isEmpty|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3949729|++Widget+_searchBox()+{
++++return+TextField(
++++++controller:+_searchController,
++++++decoration:+InputDecoration(
++++++++labelText:+"Search",
++++++++hintText:+"Search",
++++++++prefixIcon:+Icon(Icons.search),
++++++++suffixIcon:+_searchController.text.isEmpty
++++++++++++?+null
++++++++++++:+InkWell(
++++++++++++++++onTap:+()+=>+_searchController.clear(),
++++++++++++++++child:+Icon(Icons.clear),
++++++++++++++),
++++++++border:+OutlineInputBorder(
++++++++++borderRadius:+BorderRadius.all(
++++++++++++Radius.circular(10.0),
++++++++++),
++++++++),
++++++),
++++);
++}|code-block|syntax|javascript|3949730|entityMap^0|1C|U|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

I ended up using ideas from both answers. One didn't explain how to show and hide the icon while the other seemed a bit too complicated. All I did is <code>_searchController.text.isEmpty</code>

<pre><code> Widget _searchBox() {
 return TextField(
 controller: _searchController,
 decoration: InputDecoration(
 labelText: "Search",
 hintText: "Search",
 prefixIcon: Icon(Icons.search),
 suffixIcon: _searchController.text.isEmpty
 ? null
 : InkWell(
 onTap: () =&gt; _searchController.clear(),
 child: Icon(Icons.clear),
 ),
 border: OutlineInputBorder(
 borderRadius: BorderRadius.all(
 Radius.circular(10.0),
 ),
 ),
 ),
 );
 }
</code></pre>

I have two problems with this widget. When adding the <code>suffix: IconButton...</code> it adds what looks like a padding inside the textfield. And how can I show the suffix icon when _searchController.text is not empty. I tried <code>_searchController.text != null ? IconButton(...): 'not sure what to return here'</code> 

<pre><code> Widget _searchBox() {
 return TextField(
 controller: _searchController,
 decoration: InputDecoration(
 labelText: "Search",
 hintText: "Search",
 prefixIcon: Icon(Icons.search),
 suffix: IconButton(
 icon: Icon(Icons.clear),
 onPressed: () =&gt; _searchController.clear(),
 ),
 border: OutlineInputBorder(
 borderRadius: BorderRadius.all(
 Radius.circular(10.0),
 ),
 ),
 ),
 );
 }
</code></pre>

With suffix: 

<a href="https://i.stack.imgur.com/eBsCo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eBsCo.png" alt="enter image description here"></a>

Withoug suffix: 

<a href="https://i.stack.imgur.com/cJtEb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cJtEb.png" alt="enter image description here"></a>

Flutter TextField with IconButton

这个小部件有两个问题。在添加suffix: IconButton...时，它会在文本字段中添加类似于填充的内容。当_searchController.text不为空时，我如何显示后缀图标。我试过_searchController.text != null ? IconButton(...): 'not sure wha...

问带IconButton的Flutter TextField
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带IconButton的Flutter TextFieldEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带IconButton的Flutter TextField
EN