在 Flutter 中保留方向更改时的 TextField 值
Posted
技术标签:
【中文标题】在 Flutter 中保留方向更改时的 TextField 值【英文标题】：Preserve TextField value on orientation change in Flutter 【发布时间】：2019-10-06 14:31:00 【问题描述】：我在 Flutter 的 OrientationBuilder 中有一个 TextField。
现在，当我更改应用程序的方向时，TextField 的当前值（例如用户放入其中的文本）丢失了，但我想保留 TextField 的值。
我需要重建TextField，因为横向模式下的布局不同。
这可以吗？
编辑：
这是我迄今为止尝试过的：
两次我都使用了以下模型（位于 -> models -> markdownModel.dart）：
import 'package:scoped_model/scoped_model.dart';
class Code extends Model
String _markdown = '# Markdown Preview \n Your Markdown will be rendered here, once you start typing in the editor pane.';
String get markdown => _markdown;
void changeMarkdown(String markdown)
this._markdown = markdown;
notifyListeners();
现在，在我第一次尝试时，我做了以下事情（但请注意，TextField 的值不会保留在 OrientationChange 上）：
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
import 'models/markdownModel.dart';
void main() => runApp(HomeScreen(
markdown: Code(),
));
class HomeScreen extends StatelessWidget
final Code markdown;
const HomeScreen(Key key, this.markdown) : super(key: key);
@override
Widget build(BuildContext context)
return ScopedModel<Code>(
model: markdown,
child: MaterialApp(
home: OrientationBuilder(
builder: (context, orientation)
return orientation == Orientation.portrait
? DefaultTabController(
initialIndex: 1,
length: 2,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: <Widget>[
Tab(text: "Editor", /*icon: Icon(Icons.edit),*/),
Tab(text:"Preview", /*icon: Icon(Icons.chrome_reader_mode),*/),
],
),
title: Text("Markdown - Editor"),
centerTitle: true,
),
body: TabBarView(
children: <Widget>[
TextEditorWidget(),
MarkdownPreviewWidget()
],
),
),
)
: Scaffold(
appBar: AppBar(
title: Text("Markdown - Editor"),
centerTitle: true,
),
body: Container(
child: Row(
children: <Widget>[
Expanded(
child: TextEditorWidget(),
),
Expanded(
child: MarkdownPreviewWidget(),
),
],
),
),
);
,
),
),
);
class TextEditorWidget extends StatefulWidget
TextEditorWidget(Key key,) : super(key: key,);
@override
_TextEditorWidgetState createState() => _TextEditorWidgetState();
class _TextEditorWidgetState extends State<TextEditorWidget>
@override
Widget build(BuildContext context)
return ScopedModelDescendant<Code>(builder: (context, child, model)
return Container(
padding: EdgeInsets.all(7.0),
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 30, maxWidth: 40, minHeight: 50, maxHeight: 1400),
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
reverse: true,
child: TextField(
keyboardType: TextInputType.multiline,
onChanged: (text)
model.changeMarkdown(text);
,
maxLines: null,
decoration:
InputDecoration.collapsed(hintText: "Write Markdown here."),
),
),
),
);
);
class MarkdownPreviewWidget extends StatefulWidget
MarkdownPreviewWidget(Key key,) : super(key: key,);
@override
_MarkdownPreviewWidgetState createState() => _MarkdownPreviewWidgetState();
class _MarkdownPreviewWidgetState extends State<MarkdownPreviewWidget>
@override
Widget build(BuildContext context)
return ScopedModelDescendant<Code>(builder: (context, child, model)
return Container(
child: new Markdown(
data: model.markdown,
),
);
);
然后我在我的OrientationBuilder 的构建方法之外使用了TextEditingController，正如乔治所指出的那样。这行得通（在我的情况下需要一些额外的修改），但是应用程序现在非常慢：
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
import 'models/markdownModel.dart';
void main() => runApp(HomeScreen(
markdown: Code(),
));
class HomeScreen extends StatelessWidget
final Code markdown;
const HomeScreen(Key key, this.markdown) : super(key: key);
@override
Widget build(BuildContext context)
return ScopedModel<Code>(
model: markdown,
child: MaterialApp(
home: MainView(),
),
);
class MainView extends StatefulWidget
MainView(Key key,) : super(key: key,);
@override
_MainViewState createState() => _MainViewState();
class _MainViewState extends State<MainView>
final _textController = TextEditingController();
@override
void initState()
super.initState();
@override
void dispose()
// Clean up the controller when the Widget is removed from the Widget tree
// This also removes the _printLatestValue listener
_textController.dispose();
super.dispose();
@override
Widget build(BuildContext context)
return OrientationBuilder(
builder: (context, orientation)
return orientation == Orientation.portrait
? DefaultTabController(
initialIndex: 1,
length: 2,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: <Widget>[
Tab(text: "Editor", /*icon: Icon(Icons.edit),*/),
Tab(text:"Preview", /*icon: Icon(Icons.chrome_reader_mode),*/),
],
),
title: Text("Markdown - Editor"),
centerTitle: true,
),
body: TabBarView(
children: <Widget>[
TextEditorWidget(textController: _textController,),
MarkdownPreviewWidget()
],
),
),
)
: Scaffold(
appBar: AppBar(
title: Text("Markdown - Editor"),
centerTitle: true,
),
body: Container(
child: Row(
children: <Widget>[
Expanded(
child: TextEditorWidget(textController: _textController,),
),
Expanded(
child: MarkdownPreviewWidget(),
),
],
),
),
);
);
class TextEditorWidget extends StatefulWidget
final textController;
TextEditorWidget(Key key, @required this.textController ) : super(key: key,);
@override
_TextEditorWidgetState createState() => _TextEditorWidgetState();
class _TextEditorWidgetState extends State<TextEditorWidget>
@override
Widget build(BuildContext context)
return ScopedModelDescendant<Code>(builder: (context, child, model)
widget.textController.addListener(
model.changeMarkdown(widget.textController.text)
);
return Container(
padding: EdgeInsets.all(7.0),
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 30, maxWidth: 40, minHeight: 50, maxHeight: 1400),
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
reverse: true,
child: TextField(
keyboardType: TextInputType.multiline,
controller: widget.textController,
maxLines: null,
decoration:
InputDecoration.collapsed(hintText: "Write Markdown here."),
),
),
),
);
);
class MarkdownPreviewWidget extends StatefulWidget
MarkdownPreviewWidget(Key key,) : super(key: key,);
@override
_MarkdownPreviewWidgetState createState() => _MarkdownPreviewWidgetState();
class _MarkdownPreviewWidgetState extends State<MarkdownPreviewWidget>
@override
Widget build(BuildContext context)
return ScopedModelDescendant<Code>(builder: (context, child, model)
return Container(
child: new Markdown(
data: model.markdown,
),
);
);
编辑 2：
我认为上面的例子很慢，因为一遍又一遍地抛出下面的异常：
I/flutter ( 5375): ══╡ EXCEPTION CAUGHT BY FOUNDATION LIBRARY
╞════════════════════════════════════════════════════════
I/flutter ( 5375): The following NoSuchMethodError was thrown while dispatching notifications for
I/flutter ( 5375): TextEditingController:
I/flutter ( 5375): The method 'call' was called on null.
I/flutter ( 5375): Receiver: null
I/flutter ( 5375): Tried calling: call()
I/flutter ( 5375):
I/flutter ( 5375): When the exception was thrown, this was the stack:
I/flutter ( 5375): #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5)
I/flutter ( 5375): #1 ChangeNotifier.notifyListeners
package:flutter/…/foundation/change_notifier.dart:206
I/flutter ( 5375): #2 ValueNotifier.value=
package:flutter/…/foundation/change_notifier.dart:270
I/flutter ( 5375): #3 TextEditingController.selection=
package:flutter/…/widgets/editable_text.dart:166
I/flutter ( 5375): #4 EditableTextState._handleSelectionChanged
package:flutter/…/widgets/editable_text.dart:1118
I/flutter ( 5375): #5 RenderEditable.selectPositionAt
package:flutter/…/rendering/editable.dart:1403
I/flutter ( 5375): #6 RenderEditable.selectPosition
package:flutter/…/rendering/editable.dart:1375
I/flutter ( 5375): #7 _TextFieldState._handleSingleTapUp
package:flutter/…/material/text_field.dart:686
I/flutter ( 5375): #8 _TextSelectionGestureDetectorState._handleTapUp
package:flutter/…/widgets/text_selection.dart:806
I/flutter ( 5375): #9 TapGestureRecognizer._checkUp.<anonymous closure>
package:flutter/…/gestures/tap.dart:238
I/flutter ( 5375): #10 GestureRecognizer.invokeCallback
package:flutter/…/gestures/recognizer.dart:166
I/flutter ( 5375): #11 TapGestureRecognizer._checkUp
package:flutter/…/gestures/tap.dart:238
I/flutter ( 5375): #12 TapGestureRecognizer.acceptGesture
package:flutter/…/gestures/tap.dart:211
I/flutter ( 5375): #13 GestureArenaManager.sweep
package:flutter/…/gestures/arena.dart:156
I/flutter ( 5375): #14 _WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent
package:flutter/…/gestures/binding.dart:225
I/flutter ( 5375): #15 _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent
package:flutter/…/gestures/binding.dart:199
I/flutter ( 5375): #16 _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent
package:flutter/…/gestures/binding.dart:156
I/flutter ( 5375): #17 _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue
package:flutter/…/gestures/binding.dart:102
I/flutter ( 5375): #18 _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket
package:flutter/…/gestures/binding.dart:86
I/flutter ( 5375): #22 _invoke1 (dart:ui/hooks.dart:233:10)
I/flutter ( 5375): #23 _dispatchPointerDataPacket (dart:ui/hooks.dart:154:5)
I/flutter ( 5375): (elided 3 frames from package dart:async)
I/flutter ( 5375):
I/flutter ( 5375): The TextEditingController sending notification was:
I/flutter ( 5375): TextEditingController#05f71(TextEditingValue(text: ┤├, selection: TextSelection(baseOffset: 0,
I/flutter ( 5375): extentOffset: 0, affinity: TextAffinity.downstream, isDirectional: false), composing:
I/flutter ( 5375): TextRange(start: -1, end: -1)))
I/flutter ( 5375): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 5375): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.
I/chatty ( 5375): uid=10098(com.example.markdown_editor) Thread-2 identical 42 lines
I/flutter ( 5375): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.
I/flutter ( 5375): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.
I/chatty ( 5375): uid=10098(com.example.markdown_editor) Thread-2 identical 7 lines
顺便说一句。我正在尝试构建一个带有实时预览的简单降价编辑器...
【问题讨论】：
【参考方案1】：抱歉，回答晚了@George 方法是正确的，但简单的方法是通过在小部件中使用键来实现这一点，只需在 TextField 小部件中添加键字段并在状态类中添加 final _inputKey = GlobalKey(debugLabel: 'inputText');，它将在方向更改时保留文本字段值
【讨论】：
【参考方案2】：为什么会发生这种情况： OrientationBuilder 在方向改变时重建自身，可能会重置其中所有小部件的状态。
解决方案：将TextEditingController 分配给您的TextField，并在OrientationBuilder 上下文之外声明控制器。这将防止文本字段丢失其值。
例如
final _controller = TextEditingController();
Widget build(BuildContext context)
// ...
TextField(
controller: _controller,
)
// ...
编辑感谢您提供的代码。
首先，改变这个：
class _TextEditorWidgetState extends State<TextEditorWidget>
@override
Widget build(BuildContext context)
return ScopedModelDescendant<Code>(builder: (context, child, model)
widget.textController.addListener(
model.changeMarkdown(widget.textController.text)
);
// ...
到这里：
class _TextEditorWidgetState extends State<TextEditorWidget>
@override
void initState()
super.initState();
widget.textController.addListener(controllerListener);
@override
void dispose()
widget.textController.removeListener(controllerListener);
super.dispose();
void controllerListener()
// I'm not entirely sure what `changeMarkdown` method does exactly in your code.
// If this does not work - ask a separate question about scoped models.
ScopedModel.of<Code>(context).changeMarkdown(widget.textController.text);
@override
Widget build(BuildContext context)
return ScopedModelDescendant<Code>(builder: (context, child, model)
// ...
另外，还有一件小事 - 在 Row 中考虑将 Expanded 替换为 Flexible。
希望这会有所帮助。
【讨论】：
这回答了我的问题，但是正如我错误地忘记指出的那样，我已经将 TextEditingController 与 scopedModel 一起使用。所以这对我来说不是一个真正的选择，我仍然尝试过，但我认为我将不得不开始一个新问题，对我的问题进行更深入的解释。 最好始终包含一些代码。如果您已经使用了无法丢弃的控制器，则另一种解决方案可能是通过向父控制器添加侦听器并将其值用于子控制器来构建控制器之间的父子绑定。 我包含了我的代码，这不是一个最小的例子，因为我真的不知道我应该如何简化我的代码，因为这会省略部分问题...... 好的，请查看编辑后的答案。侦听器应在状态初始化时分配并在状态处置时处置。在build 方法中，它只是应该构建的小部件。如果这没有帮助，我建议单独询问有关范围模型的问题。但我也确实觉得您正在构建的想法可以通过更简单的方式实现 - 无需范围模型等。
非常感谢。它现在完美运行。是的，我认为当我使用 .txt 文件来存储我的文本时，它会简单得多......以上是关于在 Flutter 中保留方向更改时的 TextField 值的主要内容，如果未能解决你的问题，请参考以下文章