TextField的颤振光标在setState之后移动到位置0

Question

我想在TextFields文本发生变化时在文本中显示一些内容:

class _MyPageState extends State<MyPage> {
String name;
@override
Widget build(BuildContext context) {
TextEditingController c = new TextEditingController(text: name);
c.addListener(() {
setState(() { name = c.text;});
});
return Scaffold(
body: Center(
child: Column(children: [ 
Text('Hello, ' + name + '!'),
TextField(controller: c)
])));
}
}

文本按预期更新，但问题是每次我输入一个字符时，TextField的光标移动到位置0。

Answer 1

问题是每次重新构建小部件时都要创建一个新的TextEditingController。小部件正在根据输入的每个字符重新构建。

您只需要将TextEditingController移到小部件构建函数之外。并将c.addListener移动到小部件的initState函数中。这样，TextEditingController只创建一次，侦听器只添加一次。

PS:当小部件被处置时处置您的控制器也是很好的

class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
String name = '';
TextEditingController c = new TextEditingController();
@override
void initState() {
c.addListener(() {
setState(() {
name = c.text;
});
});
super.initState();
}
@override
void dispose() {
c.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(children: [
Text('Hello, ' + name + '!'),
TextField(controller: c)
])));
}
}

Answer 2

我已经修改了你的代码，你只需要改变你的TextEditingController见下面。

class _MyPageState extends State<MyWidget> {
// initialize to empty string
String name = "";

@override
Widget build(BuildContext context) {
// this is how textEditingController should be
final TextEditingController c = TextEditingController.fromValue(
new TextEditingValue(
text: name,
selection: new TextSelection.collapsed(
offset: name.length)));

c.addListener(() {
setState(() { name = c.text;});
});

return Scaffold(
body: Center(
child: Column(children: [ 
Text('Hello, ' + name + '!'),
TextField(controller: c)
])));
}
}

Answer 3

在我的情况下，我必须自定义TextField样式。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class ClearableTextField extends StatefulWidget {
const ClearableTextField({
Key? key,
this.prefixText,
this.suffixText,
this.prefix,
this.suffix,
this.inputFormatters,
this.crossAxisAlignment = CrossAxisAlignment.center,
this.hintText,
this.margin,
this.keyboardType,
this.fontSize = 16,
this.height = 1.5,
this.maxLength,
required this.value,
required this.onChanged,
}) : super(key: key);
final String? prefixText;
final String? suffixText;
final Widget? prefix;
final Widget? suffix;
final List<TextInputFormatter>? inputFormatters;
final CrossAxisAlignment crossAxisAlignment;
final String? hintText;
final EdgeInsetsGeometry? margin;
final TextInputType? keyboardType;
final double? fontSize;
final double? height;
final int? maxLength;
final dynamic value;
final ValueChanged<String> onChanged;
@override
State<ClearableTextField> createState() => _ClearableTextFieldState();
}
class _ClearableTextFieldState extends State<ClearableTextField> {
Color _underlineColor = const Color(0xFFE2E5EF);
bool _showClear = false;
late TextEditingController _controller;
final FocusNode _focusNode = FocusNode();
@override
void initState() {
super.initState();
_controller = TextEditingController(text: widget.value);
_controller.addListener(_onTextChanged);
if (_controller.text.isNotEmpty) _showClear = true;
_focusNode.addListener(_handleFocusChange);
}
@override
void didUpdateWidget(ClearableTextField oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.value == widget.value) return;
// _controller.text = widget.value; // this would make the cursor weird
_controller.value = TextEditingValue(
text: widget.value,
selection: TextSelection.collapsed(offset: widget.value.length),
); // this works fine
}
@override
void dispose() {
_controller.dispose();
_focusNode.dispose();
super.dispose();
}
void _onTextChanged() {
setState(() {
_showClear = _controller.text.isNotEmpty;
});
widget.onChanged(_controller.text);
}
void _handleFocusChange() {
if (!_focusNode.hasFocus) {
FocusManager.instance.primaryFocus?.unfocus();
_underlineColor = const Color(0xFFE2E5EF);
} else {
_underlineColor = Theme.of(context).primaryColor;
}
setState(() {});
}
void _clearText() {
widget.onChanged('');
setState(() {
_controller.clear();
_showClear = false;
});
}
@override
Widget build(BuildContext context) {
return Container(
margin: widget.margin,
padding: EdgeInsets.symmetric(vertical: 5.w),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: _underlineColor)),
),
child: Row(
crossAxisAlignment: widget.crossAxisAlignment,
children: [
if (widget.prefix != null || widget.prefixText != null) ...{
if (widget.prefix != null) widget.prefix!,
if (widget.prefixText != null) SizedBox(width: 8.w),
},
Expanded(
child: TextField(
controller: _controller,
// or use this
// _controller..selection =
//     TextSelection.collapsed(offset: widget.value.length),
focusNode: _focusNode,
inputFormatters: widget.inputFormatters,
keyboardType: widget.keyboardType,
maxLength: widget.maxLength,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: widget.fontSize,
height: widget.height,
),
decoration: InputDecoration(
counterText: '',
contentPadding: EdgeInsets.zero,
border: InputBorder.none,
hintText: widget.hintText,
hintStyle: TextStyle(
fontSize: 16.sp,
color: const Color(0xFF9498AB),
fontWeight: FontWeight.w400,
),
),
),
),
if (_showClear)
SizedBox(
width: 32.w,
height: 32.w,
child: IconButton(
iconSize: 18.w,
icon: Image.asset('assets/images/public/clear_input.png'),
onPressed: _clearText,
),
),
if (widget.suffix != null || widget.suffixText != null) ...{
if (widget.suffix != null) widget.suffix!,
if (widget.suffixText != null)
Text(
widget.suffixText!,
style: TextStyle(
fontSize: 24.sp,
fontWeight: FontWeight.w500,
),
),
},
],
),
);
}
}

如果你有didUpdateWidget，要小心，用_controller.value代替_controller.text，或者直接删除它。