flutter 如何将用户输入的抖动TextFormField保存为一个值？

sxissh06 于 2023-01-31 发布在 Flutter

关注(0)|答案(3)|浏览(149)

我在学扑翼，我很困惑。
我想做一个超级简单的文本表单和一个按钮。用户在表单中输入文本，点击按钮，文本就会打印到控制台上。这能有多难呢？：-）

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

void main() => runApp(const Kabbalah());

class Kabbalah extends StatelessWidget {
  const Kabbalah({Key? key}) : super(key: key);

  static const String _title = 'Kabbalistic Numerology';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
          appBar: AppBar(
            title: const Text(_title),
          ),
          body: const Center(
            child: const FullNameField(),
          )
      ),
    );
  }
}

class FullNameField extends StatefulWidget {
  const FullNameField({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _FullNameState();
  }
}

class _FullNameState extends State<FullNameField> {

  @override
  Widget build(BuildContext context) {

    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
          child: TextFormField(
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              labelText: 'Enter your full name (First Middle Last)',
            ),
            onSaved: (String? fullName) {
              debugPrint(fullName);
              // This optional block of code can be used to run
              // code when the user saves the form.
            },
          ),
        ),
        ElevatedButton(
          style: ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
          onPressed: () {
            debugPrint('Clicked!');
            setState(() {
              _FullNameState.save(); // <-- problem is here
            });
          },
          child: const Text('Get Fortune'),
        ),
      ],
    );
  }
}

我的代码生成了一个漂亮的小窗体和一个可爱的按钮。

当输入名称并单击按钮时，我在控制台中看到Clicked!。
我的计划是在用户单击按钮后保存表单状态，然后onSaved()将执行并将输入的文本打印到控制台。
问题似乎出在用户单击按钮后保存表单状态。_fullNameState.save();不起作用，因为_fullNameState没有.save成员。我们不是从扩展StatefulWidget得到.save吗？
先谢谢你的帮助。

flutter

来源：https://stackoverflow.com/questions/70703705/how-to-save-flutter-textformfield-user-input-to-a-value

3条答案

按热度按时间

fdbelqdn1#

我已经完成了你的工作。我附上了我的代码片段下面。请检查和尝试自己。希望它会有所帮助。我还附上截图下面。
main.dart代码段--〉〉

import 'package:flutter/material.dart';
import 'package:test2/test3.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: TextFormFieldWidgetTest.id,
      routes: {
        TextFormFieldWidgetTest.id: (context) => TextFormFieldWidgetTest(),
      },
    );
  }
}

文本表单字段编码--〉

import 'package:flutter/material.dart';

class TextFormFieldWidgetTest extends StatefulWidget {
  const TextFormFieldWidgetTest({Key? key}) : super(key: key);
  static final String id = "text_form_field";

  @override
  _TextFormFieldWidgetTestState createState() =>
      _TextFormFieldWidgetTestState();
}

class _TextFormFieldWidgetTestState extends State<TextFormFieldWidgetTest> {
  // * Form Key
  final _formKey = GlobalKey<FormState>();
  // * Editing Controller
  final TextEditingController firstNameController = TextEditingController();

  String? firstName;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Form(
                  key: _formKey,
                  child: Container(
                    decoration: BoxDecoration(
                        color: const Color(0x0fffffff),
                        borderRadius: BorderRadius.circular(10)),
                    child: TextFormField(
                      style: const TextStyle(
                        color: Colors.black,
                      ),
                      decoration: InputDecoration(
                        labelText: "First Name",
                        floatingLabelStyle: const TextStyle(
                          color: Color(0xFF1cbb7c),
                          fontWeight: FontWeight.w600,
                        ),
                        labelStyle: TextStyle(
                          color: Colors.grey.shade500,
                          fontWeight: FontWeight.w600,
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: const BorderSide(
                            width: 1,
                            color: Colors.grey,
                          ),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: const BorderSide(
                            width: 2,
                            color: Color(0xFF1cbb7c),
                          ),
                        ),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide.none,
                        ),
                        contentPadding:
                            const EdgeInsets.fromLTRB(20, 15, 20, 15),
                        fillColor: Colors.white,
                        filled: true,
                      ),
                      controller: firstNameController,
                      keyboardType: TextInputType.name,
                      onSaved: (value) {
                        firstNameController.text = value!;
                      },
                      textInputAction: TextInputAction.done,
                    ),
                  ),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      firstName = firstNameController.text;
                      print(firstName);
                    });
                  },
                  child: Text("Save Data"),
                ),
                firstName == null ? Text("") : Text(firstName!),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

放置文本值之前--〉〉x1c 0d1x
放入文本值后--〉〉

赞(0）回复(0）举报 2023-01-31

72qzrwbm2#

为什么不直接使用TextEditingController呢？
只需像这样初始化一个：

TextEditingController yourController = TextEditingController();

然后在textform字段中使用它：

controller: yourController;

单击该按钮时，执行：

String enteredText = yourController.text();
print(enteredText);

赞(0）回复(0）举报 2023-01-31

avwztpqn3#

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController tc = TextEditingController();
  @override
  Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextFormField(
          controller: tc,
        ),
        ElevatedButton(
            child: Text("Print"),
            onPressed: () {
              print(tc.text);
              Future.delayed(Duration(seconds: 1), () {
                tc.clear();
              });
            }),
      ],
    ),
  ),
);
}
 }

现在，我们在这里使用TextEditingController，因为它赋予父小部件对其子状态的控制权。
现在，.text包含了在TextField中输入的值。因此，当按钮被按下时，该值被打印，表单被清除。

赞(0）回复(0）举报 2023-01-31

我来回答

flutter 如何将用户输入的抖动TextFormField保存为一个值？

3条答案

相关问题

热门标签

最新问答