Есть ли способ добавить четкую кнопку в виджет TextField в Flutter?
как это изображение в руководящих принципах дизайна:
То, что я нашел, - установить четкий IconButton в суффиксе InputDecorationIcon. Правильно ли это?
Есть ли способ добавить четкую кнопку в виджет TextField в Flutter?
как это изображение в руководящих принципах дизайна:
То, что я нашел, - установить четкий IconButton в суффиксе InputDecorationIcon. Правильно ли это?
Container(
margin: EdgeInsets.only(left: 16.0),
child: TextFormField(
controller: _username,
decoration: InputDecoration(
hintText: '请输入工号',
filled: true,
prefixIcon: Icon(
Icons.account_box,
size: 28.0,
),
suffixIcon: IconButton(
icon: Icon(Icons.remove),
onPressed: () {
debugPrint('222');
})),
),
),
использовать iconButton
Попробуй это -
final TextEditingController _controller = new TextEditingController();
new Stack(
alignment: const Alignment(1.0, 1.0),
children: <Widget>[
new TextField(controller: _controller,),
new FlatButton(
onPressed: () {
_controller.clear();
},
child: new Icon(Icons.clear))
]
)
Вот еще один ответ, немного расширивший ответ @Vilokan Labs, который на самом деле не делал этого для меня, поскольку FlatButton имеет минимальную ширину 88,0, и, таким образом, кнопка очистки вообще не выровнена по правому краю с TextField.
Итак, я сделал свой собственный класс кнопок и применил его с помощью стека, вот мой процесс:
Класс кнопки:
class CircleIconButton extends StatelessWidget {
final double size;
final Function onPressed;
final IconData icon;
CircleIconButton({this.size = 30.0, this.icon = Icons.clear, this.onPressed});
@override
Widget build(BuildContext context) {
return InkWell(
onTap: this.onPressed,
child: SizedBox(
width: size,
height: size,
child: Stack(
alignment: Alignment(0.0, 0.0), // all centered
children: <Widget>[
Container(
width: size,
height: size,
decoration: BoxDecoration(
shape: BoxShape.circle, color: Colors.grey[300]),
),
Icon(
icon,
size: size * 0.6, // 60% width for icon
)
],
)));
}
}
Затем примените аналогично InputDecoration
к вашему TextField:
var myTextField = TextField(
controller: _textController,
decoration: InputDecoration(
hintText: "Caption",
suffixIcon: CircleIconButton(
onPressed: () {
this.setState(() {
_textController.clear();
});
},
)),
},
);
Чтобы получить это:
Невыделенное состояние
Выделенное/выбранное состояние.
Обратите внимание, что эта раскраска становится бесплатной, когда вы используете suffixIcon
.
Обратите внимание, что вы также можете поместить его в свой TextField следующим образом, но вы не получите автоматическую окраску, которую получаете при использовании suffixIcon
:
var myTextFieldView = Stack(
alignment: Alignment(1.0,0.0), // right & center
children: <Widget>[
TextField(
controller: _textController,
decoration: InputDecoration(hintText: "Caption"),
),
Positioned(
child: CircleIconButton(
onPressed: () {
this.setState(() {
_textController.clear();
});
},
),
),
],
);
TextFormField(
controller:_controller
decoration: InputDecoration(
suffixIcon: IconButton(
onPressed: (){
_controller.clear();
},
icon: Icon(
Icons.keyboard,
color: Colors.blue,
),
),
),
)
Чтобы добавить значок в текстовое поле. Вам необходимо использовать suffixIcon или prefixIcon внутри оформления ввода.
TextFormField(
autofocus: false,
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
suffixIcon: Icon(
Icons.clear,
size: 20.0,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(0.0)),
),
hintText: 'Enter Password',
contentPadding: EdgeInsets.all(10.0),
),
);
Поиск TextField со значком и кнопкой очистки
import 'package:flutter/material.dart';
class SearchTextField extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new SearchTextFieldState();
}
}
class SearchTextFieldState extends State<SearchTextField>{
final TextEditingController _textController = new TextEditingController();
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Row(children: <Widget>[
new Icon(Icons.search, color: _textController.text.length>0?Colors.lightBlueAccent:Colors.grey,),
new SizedBox(width: 10.0,),
new Expanded(child: new Stack(
alignment: const Alignment(1.0, 1.0),
children: <Widget>[
new TextField(
decoration: InputDecoration(hintText: 'Search'),
onChanged: (text){
setState(() {
print(text);
});
},
controller: _textController,),
_textController.text.length>0?new IconButton(icon: new Icon(Icons.clear), onPressed: () {
setState(() {
_textController.clear();
});
}):new Container(height: 0.0,)
]
),),
],);
}
}
IconButton (icon: Icon (Icons.clear_all), всплывающая подсказка: 'Close', onPressed:() {},)
Выход:
Создать переменную
var _controller = TextEditingController();
И твой TextField
:
TextField(
controller: _controller,
decoration: InputDecoration(
hintText: "Enter a message",
suffixIcon: IconButton(
onPressed: () => _controller.clear(),
icon: Icon(Icons.clear),
),
),
)
Вот фрагмент моего кода, который работает.
Что он делает: показывать кнопку очистки только в том случае, если значение текстового поля не пустое
class _MyTextFieldState extends State<MyTextField> {
TextEditingController _textController;
bool _wasEmpty;
@override
void initState() {
super.initState();
_textController = TextEditingController(text: widget.initialValue);
_wasEmpty = _textController.text.isEmpty;
_textController.addListener(() {
if (_wasEmpty != _textController.text.isEmpty) {
setState(() => {_wasEmpty = _textController.text.isEmpty});
}
});
}
@override
void dispose() {
_textController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return TextFormField(
controller: _textController,
decoration: InputDecoration(
labelText: widget.label,
suffixIcon: _textController.text.isNotEmpty
? Padding(
padding: const EdgeInsetsDirectional.only(start: 12.0),
child: IconButton(
iconSize: 16.0,
icon: Icon(Icons.cancel, color: Colors.grey,),
onPressed: () {
setState(() {
_textController.clear();
});
},
),
)
: null,
),);
...