为什么一旦我向文本编辑控制器添加侦听器以改变颤振中的文本大小，焦点就会停留在文本字段上?

Question

我想根据输入的字符数更改文本字段中的文本大小。我设置了 50 的上限和 25 的下限，并根据文本字段的控制器中初始值的长度初始化了文本大小。

这是用于在initState()中添加侦听器的代码

@override
void initState(){
super.initState();
setState(() {
_controller.text = widget.list.listHeader;
});
Timer.run(() {
_initializeTextStyle();
});
_controller.addListener(_setHeader);
_controller.addListener(_changeTextSize);
}

以下是_changeTextSize的代码

TextStyle _changeTextSize(){
var fieldWidth = MediaQuery.of(context).size.width * 0.80 - 12.0;
TextSpan ts = new TextSpan(style: textStyle, text: _controller.text);
tp = new TextPainter(text: ts, textDirection: TextDirection.ltr);
tp.layout();
var textWidth = tp.width;
if((textWidth - fieldWidth) > 5){
print(textWidth.toString() + " " + fieldWidth.toString());
setState(() {
textStyle = TextStyle(
color: Colors.brown,
fontSize: max(textStyle.fontSize - 1, 25),
fontFamily: 'DancingScript');
});
} else if((textWidth - fieldWidth) < -5){
setState(() {
textStyle = TextStyle(
color: Colors.brown,
fontSize: min(textStyle.fontSize + 1, 50),
fontFamily: 'DancingScript');
});
}}

这是我创建小部件的地方

@override
Widget build(BuildContext context) {
final listView = new Padding(
padding: EdgeInsets.all(1.0),
child: Column(
children: [
Padding(
padding: _padding * 2,
child: TextField(
keyboardType: TextInputType.text,
cursorColor: Colors.black38,
maxLength: 50,
autofocus: false,
maxLengthEnforced: true,
controller: _controller,
style: textStyle,
decoration: InputDecoration(
labelStyle: TextStyle(
color: Colors.brown,
fontSize: 30,
fontFamily: 'DancingScript'),
labelText: 'Title...'))),
Container(
height: MediaQuery.of(context).size.height * 0.40,
width: MediaQuery.of(context).size.width * 0.75,
child: new ListView.builder(
itemCount: widget.list.listItems.length,
itemBuilder: (BuildContext ctxt, int index) {
final item = widget.list.listItems[index];
return Dismissible(
key: UniqueKey(),
direction: DismissDirection.startToEnd,
child: Padding(
padding: EdgeInsets.all(MediaQuery.of(context).size.width * 0.015),
child: Row(
children: [
widget.list.listItems[index],
IconButton(
iconSize: _getIconSize(),
icon: Icon(
Icons.delete_forever,
),
onPressed: () {
setState(() {
widget.list.removeWithFlags(index);
});
},
)
],
)
),
onDismissed: (direction) {
setState(() {
widget.list.removeWithFlags(index);
});
},
);
})
),
IconButton(
icon: Icon(
Icons.add,
size: _getIconSize(),
),
onPressed: () {
setState(() {
widget.list.addWithFlags(new Item.flag(focusFlag: true));
});
},
)
]
));
return Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.80,
height: MediaQuery.of(context).size.height * 0.70,
child: listView,
)
);
}

我面临的问题是，一旦我将焦点转移到第一个文本字段(带有_controller的那个(，它就会卡在那里，我无法将焦点转移到布局中的任何其他文本字段。

小组件的屏幕截图。焦点卡在标题部分

Answer 1

焦点卡在文本字段上_changeTextSize因为每次函数调用都会setState。这会导致应用程序继续循环构建，从而卡住。

在编辑代码以仅在满足某些条件时才调用setState时，问题就会消失。

我没有尝试以这种方式编辑字体大小，而是为此目的选择了有用的第三方库 - auto_size_text_field

Container(
width: MediaQuery.of(context).size.width * 0.60,
child: AutoSizeTextField(
cursorColor: Colors.lightBlueAccent,
controller: _controller,
autofocus: widget.focusFlag,
style: TextStyle(
color: Colors.black54,
fontSize: 20,
),
),
),