如何从 Flutter 中的状态更改 TextField 值?

斯拉瓦

我想从其他状态更新 TextField 值,我从父小部件传递(并在 中设置文本initState())。我的 TextField 小部件设置了一次值,但在状态更新时不会更新。是否可以将 TextField 值与来自父级的状态同步?

更新:

我的文本字段

import 'package:flutter/material.dart';

class MyTextField extends StatefulWidget {
  final hintText;
  final icon;
  final keyboardType;
  final onTap;
  final readOnly;
  final text;

  const MyTextField(
      {this.hintText,
      this.icon,
      this.keyboardType,
      this.onTap,
      this.readOnly,
      this.text});

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

class _MyTextFieldState extends State<MyTextField> {
  TextEditingController textController = TextEditingController();
  late FocusNode focusNode = FocusNode();
  Color fieldColor = MidneitColors.silverSand200;

  void _fieldFocusListener() {
    setState(() {
      fieldColor = focusNode.hasFocus
          ? Colors.red
          : Colors.blue;
    });
  }

  @override
  void initState() {
    textController.text = widget.text ?? '';
    super.initState();

    focusNode.addListener(_fieldFocusListener);
  }

  @override
  void dispose() {
    focusNode.removeListener(_fieldFocusListener);

    textController.dispose();
    focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(
              const Radius.circular(10)),
          boxShadow: [
            BoxShadow(
                blurRadius: 15,
                color: Colors.grey,
                spreadRadius: -7,
                offset: const Offset(0, 4))
          ]),
      child: TextFormField(
        controller: textController,
        readOnly: widget.readOnly == null ? false : widget.readOnly,
        focusNode: focusNode,
        keyboardType: widget.keyboardType,
        onTap: widget.onTap,
        decoration: InputDecoration(
          contentPadding: const EdgeInsets.only(left: 20),
          prefixIcon: widget.icon != null
              ? Icon(widget.icon, size: 18, color: fieldColor)
              : null,
          fillColor: Colors.white,
          enabledBorder: OutlineInputBorder(
              borderSide: const BorderSide(color: Colors.grey),
              borderRadius: BorderRadius.all(
                  const Radius.circular(10.0))),
          focusedBorder: const OutlineInputBorder(
              borderSide: const BorderSide(color: Colors.blue),
              borderRadius: const BorderRadius.all(
                  const Radius.circular(10.0))),
          hintText: widget.hintText,
        ),
      ),
    );
  }
}

我的主屏幕

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String city = 'Mos';

  void onPressed() {
    setState(() {
      city = 'St.Peter';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Container(
      padding: const EdgeInsets.all(20),
      child: ListView(
        children: [
          Form(
              child: Column(
            children: [
              MyTextField(
                  hintText: 'From',
                  onTap: () => onPressed(),
                  readOnly: true,
                  text: city)
            ],
          ))
        ],
      ),
    )));
  }
}
甘米

你可以使用一个TextEditingController_HomeScreenState

删除city字符串,并用控制器替换它:

TextEditingController controller = new TextEditingController(text: 'Mos');

  void onPressed() {
    setState(() {
      controller.text = 'St.Peter';
    });
  }

将控制器作为参数发送到MyTextField

MyTextField(
  hintText: 'From',
  onTap: () => onPressed(),
  readOnly: true,
  controller: controller,
)

在里面MyTextField添加控制器参数:

final TextEditingController controller;

  const MyTextField(
      {this.hintText,
        this.icon,
        this.keyboardType,
        this.onTap,
        this.readOnly,
      this.controller});

在状态内部,删除旧的TextEditingController textController以及与参数相关的所有内容text

然后将控制器添加到TextFormField

class _MyTextFieldState extends State<MyTextField> {
  TextEditingController textController = TextEditingController();
  FocusNode focusNode = FocusNode();
  Color fieldColor = Colors.grey;

  void _fieldFocusListener() {
    setState(() {
      fieldColor = focusNode.hasFocus
          ? Colors.red
          : Colors.blue;
    });
  }

  @override
  void initState() {
    super.initState();

    focusNode.addListener(_fieldFocusListener);
  }

  @override
  void dispose() {
    focusNode.removeListener(_fieldFocusListener);

    textController.dispose();
    focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(
              const Radius.circular(10)),
          boxShadow: [
            BoxShadow(
                blurRadius: 15,
                color: Colors.grey,
                spreadRadius: -7,
                offset: const Offset(0, 4))
          ]),
      child: TextFormField(
        readOnly: widget.readOnly == null ? false : widget.readOnly,
        focusNode: focusNode,
        keyboardType: widget.keyboardType,
        onTap: widget.onTap,
        controller: widget.controller,
        decoration: InputDecoration(
          contentPadding: const EdgeInsets.only(left: 20),
          prefixIcon: widget.icon != null
              ? Icon(widget.icon, size: 18, color: fieldColor)
              : null,
          fillColor: Colors.white,
          enabledBorder: OutlineInputBorder(
              borderSide: const BorderSide(color: Colors.grey),
              borderRadius: BorderRadius.all(
                  const Radius.circular(10.0))),
          focusedBorder: const OutlineInputBorder(
              borderSide: const BorderSide(color: Colors.blue),
              borderRadius: const BorderRadius.all(
                  const Radius.circular(10.0))),
          hintText: widget.hintText,
        ),
      ),
    );
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Flutter中获取TextField值

Flutter-如何更改TextField提示颜色?

如何在flutter中制作圆形的TextField?

如何只对Flutter中TextField中的文本应用填充?

在Flutter中输入值时如何保存TextField的值

如何在Flutter中创建全屏TextField

如何使用flutter_flux从商店更改TextField文本?

如何使用onchange使用TextField中的值设置状态数组

如何将分组的TextField值设置为状态?

如何禁用Flutter的TextField中的预测文本?

如何仅对flutter中的TextField禁用splashColor?

在Flutter中保留方向更改时保留TextField的值

如何在Flutter中的TextField中获取DropDown

Flutter:保存TextField值

如何从From外部更改Formik TextField值?

如何更改TextField值而不必先删除它(Flutter)

如何在Flutter中的TextField框中创建标题?

如何在Flutter中更改TextField的hintText FontFamily

如何在字典中设置textfield的值?

如何在UIAlertController中获取textField的值?

如何将 Firestore 中的数据设置为 Flutter 中 TextField 的初始值?

如何限制用户在 Flutter 的 TextField 中输入更多或更少的特定值?

如何根据 SwiftUI 中的输入更改 TextField 状态?

Flutter 从 TextField 中检索值

Flutter:如果未更改 TextField 小部件,如何将初始化值作为最终值

Flutter - 如何使用 FutureBuilder 的动态值提供 TextField 的初始值?

Flutter - 如何在设置状态后直接更改值

Flutter:如何更改禁用的 TextField 中的边框颜色?

如何在 Flutter 的 TextField 中显示按钮值?