Flutter：从 DropDownMenu 和 DatePicker 获取 TextFormField 内的文本答案

【问题标题】：Flutter: Get text inside a TextFormField from from a DropDownMenu and DatePickerFlutter：从 DropDownMenu 和 DatePicker 获取 TextFormField 内的文本
【发布时间】：2023-02-07 21:24:31
【问题描述】：

从 DropDownMenu 和 DatePicker 中选择一些值后，有没有办法在 TextFormField 中获取一些文本？

在我的应用程序中，我有 TextFormField，我想通过键盘输入一些文本，或者从 DropDown Menu antd DatePicker 中选择。

通过按下按钮将文本插入 TextFormField 后，该值将显示在屏幕上。

从 DroDownMenu 和 Datepicker 中选择并按下按钮将其显示在屏幕上后，我能够。

但我希望选定的 DropDownMenu 和 Datepicker 值首先进入 TextFormField 内，按下按钮后它将显示在屏幕上。

在此先感谢您的帮助。

遵循代码：

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

void main() async {
  Get.put(SpringTesterController());
  runApp(const GetMaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GetBuilder<SpringTesterController>(
            init: SpringTesterController(),
            builder: (gtxs1) {
              return const MyHomePage();
            }),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return GetBuilder<SpringTesterController>(
        init: SpringTesterController(),
        builder: (gtxs1) {
          return Column(
            children: [
              Row(
                children: [
                  const Text(
                    'Name:',
                    style: TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.w500,
                      color: Colors.blue,
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Text(
                    gtxs1.displayedValue,
                    style: const TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.w500,
                      color: Color(0xFFEF6C00),
                    ),
                  ),
                ],
              ),
              Row(
                children: [
                  IconButton(
                    icon: const Icon(
                      Icons.calendar_month_outlined,
                    ),
                    onPressed: () async {
                      await gtxs1.selectDate(context);
                    },
                  ),
                  DropdownButton(
                    value: gtxs1.selectedValue,
                    onChanged: (value) {
                      gtxs1.onSelectedDropdown(value.toString());
                    },
                    items: const [
                      DropdownMenuItem(
                        value: '1',
                        child: Text('1'),
                      ),
                      DropdownMenuItem(
                        value: '2',
                        child: Text('2'),
                      ),
                      DropdownMenuItem(
                        value: '3',
                        child: Text('3'),
                      ),
                      DropdownMenuItem(
                        value: '4',
                        child: Text('4'),
                      ),
                    ],
                  ),
                ],
              ),
              Form(
                key: _formKey,
                child: Row(
                  children: [
                    SizedBox(
                      height: 40,
                      width: 250,
                      child: TextFormField(
                        onChanged: gtxs1.onTextFieldChanged,
                      ),
                    ),
                    IconButton(
                      icon: const Icon(
                        Icons.save,
                      ),
                      onPressed: () {
                        gtxs1.setName();
                      },
                    ),
                  ],
                ),
              ),
            ],
          );
        });
  }
}

//***********************************************************************************************
//**                             class SpringTesterController
//***********************************************************************************************
class SpringTesterController extends GetxController {
  static SpringTesterController get to => Get.find();
  String? selectedValue;
  String enteredValue = '';
  String displayedValue = '';
  DateTime _selectedDate = DateTime.now();

  void onSelectedDropdown(String newValue) {
    selectedValue = newValue;
    update();
  }

  void onTextFieldChanged(String newValue) {
    enteredValue = newValue;
    update();
  }

  void setName() {
    if (enteredValue.isNotEmpty) {
      displayedValue = enteredValue;
    } else {
      if (selectedValue != null) {
        displayedValue = '${selectedValue!} $_selectedDate';
      } else {
        displayedValue = _selectedDate.toString();
      }
    }
    update();
  }

  Future<void> selectDate(BuildContext context) async {
    final DateTime? picked = await showDatePicker(
      context: context,
      initialDate: _selectedDate,
      firstDate: DateTime(2015),
      lastDate: DateTime(2101),
    );
    if (picked != null && picked != _selectedDate) {
      _selectedDate = picked;
    }
    update();
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

在 MyHomePageState 类中定义控制器，如下所示：

TextEditingController textController = TextEditingController();

在你的TextFormField 中分配控制器，如下所示：

                       TextFormField(
                        onChanged: gtxs1.onTextFieldChanged,
                        controller: textController,
                      ),

当您点击 DropdownMenu 时，将文本分配给控制器，如下所示：

textController.text = 'your data from Dropdown/DatePicker'；

更多信息请参考TextEditingController的官方文档

【讨论】：

【解决方案2】：

您可以获得从 DropDownMenu 和 DatePicker 中选择的值，并将它们插入到 TextFormField 中。这是在 Flutter 中执行此操作的一种方法：

将选定的值存储在变量中：

字符串选择值；日期时间选择日期；
在 DropDownMenu 中，使用 onChanged 属性更新 selectedValue 变量：

下拉按钮( 值：选择值，项目： [ 下拉菜单项( child: Text('Option 1'), 价值：'选项1'， ), // 添加更多选项 ], onChanged：（值）{ 设置状态（（）{ 选定值 = 值； }); }, ),
在 DatePicker 中，使用 onChanged 属性更新 selectedDate变量：

RaisedButton( child: Text('选择日期'), onPressed: () 异步 { 最终日期 = 等待 showDatePicker( 上下文：上下文，初始日期：选定日期 ??日期时间.now(), 第一个日期：日期时间（2020），最后日期：日期时间（2030）， ); 如果（日期！=空）{ 设置状态（（）{ 选择日期=日期； }); } }, ),
在 TextFormField 中，使用 controller 属性插入选定值：

TextFormField( 控制器：TextEditingController（文本：'$selectedValue $selectedDate'）， ),
1. 最后，按下按钮时，您可以使用 TextFormField.controller.text属性获取值并显示它在屏幕上。
注意：这只是完成此任务的一种方法，您可能需要调整代码以适合您的特定用例。

【讨论】：