Question

在我的本地反应项目中，我在一页中有一个数据列表。然后，从列表中单击每张卡，然后通过传递被按下的卡的值（如下面的代码-

），进入它们的详细信息页面

Navigator.pushNamed(ctxt, '/DetailsNotes', arguments: _allNotes[index]);

之后，在下一个屏幕中，我将收到构建函数中的值，如下所示：

final ModelAllNotes args = ModalRoute.of(context).settings.arguments;

在此屏幕中，我有两个 TextFormField ，并在如下所示的构建函数中对其进行了初始化-

final title = TextFormField(
  controller: _textFieldControllerTitle,
  keyboardType: TextInputType.emailAddress,
  autofocus: false,
  maxLength: 100,

  decoration: InputDecoration(
    hintText: 'Title',
    labelText: 'Title',

    icon: Icon(selectedIcons),
    contentPadding: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
    border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0)),
  ),


  validator: (value) {
    if (value.isEmpty) {
      return 'Enter some text';
    }
    return null;
  },

  onSaved: (String value) {
    this._data.title = value;
  },

);

我还声明了 controllerer 来处理文本更改和保存 TextFormField 的问题，如下所示-

   TextEditingController _textFieldControllerTitle = TextEditingController();

所以，现在的问题是-

我想从args变量中收到的值中获取 TextFormField 的初始值，然后允许用户编辑TextformFields。但是每当我对每个 TextFormField 使用 initialValue 属性时，它就无法正常工作。

我需要一个解决方案来获取args（从上一屏幕中）获得的值，然后最初在我的 TextFromField 中显示它们并使其可编辑。

Answer 1

尝试一下：

class ... extends State<...>{
TextEditingController controller;

  @override
  void initState() {
    controller = TextEditingController();
    super.initState();
  }

  @override
  void didChangeDependencies() {
    final arg = ModalRoute.of(context).settings.arguments;
    controller.text = arg;
    super.didChangeDependencies();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

Answer 2

一种选择是使用TextEditingController.fromValue(...)：

TextFormField(
  controller: TextEditingController.fromValue(
    TextEditingValue(
      text: arg,
      selection: TextSelection.collapsed(
        offset: arg.length,
      ),
    ),
  ),
),

您可以通过连接各种侦听器以及诸如此类来检索或/和操作值的方法，使其变得更加复杂/有用。

要查看其运行情况，我在下面添加了一个最小的可运行示例。您的案例可能需要更多代码（也许dispose和更强大的offset处理），因为它仅用于说明目的。

import 'package:flutter/material.dart';

void main() {
  runApp(Editable());
}

class Editable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => FirstScreen(),
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: RaisedButton(
          child: Text('To editable screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second', arguments: 'some value');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String value = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(title: Text("Second Screen")),
      body: Center(
        child: Column(
          children: <Widget>[
            TextFormField(
              controller: TextEditingController.fromValue(
                TextEditingValue(
                  text: value,
                  selection: TextSelection.collapsed(offset: value.length),
                ),
              ),
            ),
            RaisedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Back'),
            ),
          ],
        ),
      ),
    );
  }
}

如何在Flutter中从上一屏幕收到的值上将初始值设置为TextFormField？

2 个答案: