我想添加图标到文本表单字段的hintText字段。我已经阅读了有关前缀图标和后缀图标,但他们永久添加图标。我想作为一个hintText图标,以便当用户点击它消失像hintText。我如何才能实现这一点在Flutter
dgenwo3n1#
你不能用TextFormField的属性来实现这一点,但是你可以根据Field的控制器来更改Icon的可见性:
bool isVisible = true; TextEditingController controller = TextEditingController(); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: TextFormField( controller: controller, onChanged: (text){ setState(() { controller.text.isEmpty ? isVisible = true : isVisible = false; }); }, decoration: InputDecoration( hintText: 'hintText', prefixIcon: Visibility( visible: isVisible, child: Icon(Icons.person, color: Colors.grey,), ), ), ), ), ); } @override void dispose() { controller.dispose(); super.dispose(); }
字符串
7ivaypg92#
希望这对你有帮助!x1c 0d1x的数据
import 'package:flutter/material.dart'; class SearchInputWidget extends StatefulWidget { final String? hintText; final EdgeInsetsGeometry outsidePadding, contentPadding; SearchInputWidget({ Key? key, this.hintText = "Search", this.outsidePadding = const EdgeInsets.only(top: 18, bottom: 0), this.contentPadding = const EdgeInsets.all(16), }) : super(key: key); @override State<SearchInputWidget> createState() => _SearchInputWidgetState(); } class _SearchInputWidgetState extends State<SearchInputWidget> { final ValueNotifier<bool> hintVisibilityNotifier = ValueNotifier(true); final TextEditingController textEditingController = TextEditingController(); @override Widget build(BuildContext context) { return Padding( padding: widget.outsidePadding, child: Stack( children: [ TextFormField( textAlign: TextAlign.center, controller: textEditingController, style: TextStyle( // color: Colors.grey.shade500, color: Colors.black, fontFamily: "Asap", fontSize: 20), decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.circular(10.0), borderSide: BorderSide.none), filled: true, fillColor: Colors.grey.shade300, contentPadding: widget.contentPadding), onChanged: (text) { if (text.isEmpty) { hintVisibilityNotifier.value = true; } else { hintVisibilityNotifier.value = false; } }, onEditingComplete: () { if (textEditingController.text.isEmpty) { hintVisibilityNotifier.value = true; } else { hintVisibilityNotifier.value = false; } }, ), ValueListenableBuilder( valueListenable: hintVisibilityNotifier, builder: (BuildContext context, bool isVisible, Widget? child) { if (isVisible) { return Positioned.fill( child: Align( alignment: Alignment.center, child: IgnorePointer( child: Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Icon( Icons.search, color: Colors.grey.shade500, size: 26, ), SizedBox( width: 5, ), Text( widget.hintText!, style: TextStyle( color: Colors.grey.shade500, fontFamily: "Asap", fontSize: 20, ), ), ], ), ), ), ); } else { return SizedBox.shrink(); } }) ], ), ); } }
omtl5h9j3#
如果你愿意,你可以添加一个表情符号到你的'hintText'字符串。由于表情符号被视为字符串,例如在flutter中,如果你想使用'close'图标,你可以使用'cross mark'表情符号代替下面给出了搜索表情符号搜索结果🔍
的数据
class ResultPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Padding( padding: const EdgeInsets.all(20.0), child: TextField( decoration: InputDecoration(hintText: " ❌ hello this is a hint text"), ), ))); } }
4xrmg8kj4#
class ResultPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Padding( padding: const EdgeInsets.all(20.0), child: TextField( decoration: InputDecoration( prefixIcon: Icon(Icons.search, color: Colors.black), hintText: "hello this is a hint text") ), ))); } }
4条答案
按热度按时间dgenwo3n1#
你不能用TextFormField的属性来实现这一点,但是你可以根据Field的控制器来更改Icon的可见性:
字符串
7ivaypg92#
希望这对你有帮助!
x1c 0d1x的数据
字符串
omtl5h9j3#
如果你愿意,你可以添加一个表情符号到你的'hintText'字符串。由于表情符号被视为字符串,例如在flutter中,如果你想使用'close'图标,你可以使用'cross mark'表情符号代替
下面给出了搜索表情符号搜索结果🔍
的数据
字符串
4xrmg8kj4#
字符串