Flutter：从另一个小部件或屏幕清除文本字段

Question

如果我让这个屏幕包含一些小部件:

@override
  Widget build(BuildContext context) {
   return Column(children :[
    TextFieldWidget(),
    ClearButton(),
])
}

文本字段小部件是无状态小部件return带有名为“color”的控制器的文本字段。

ClearButton 小部件 return 提升按钮，我希望在按下按钮时清除文本字段文本。我该怎么做。

Answer 1

你可以试试这个

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

   final TextEditingController controller = new TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          CustomTextFieldWiget(controller: controller),
          CustomButton(
            onPressed: () {
              controller.text = "";
            },
          )
        ],
      ),
    );
  }
}

class CustomButton extends StatelessWidget {
  final VoidCallback? onPressed;
  const CustomButton({Key? key, this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: onPressed,
      child: Text("Button"),
    );
  }
}

class CustomTextFieldWiget extends StatelessWidget {
  final TextEditingController? controller;
  const CustomTextFieldWiget({Key? key, this.controller}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
    );
  }
}

Answer 2

你可以玩一下。

class TestWidget extends StatelessWidget {
  TestWidget({Key? key}) : super(key: key);
  final TextEditingController controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        TextFiledWidget(controller: controller),
        ClearButton(
          callback: () {
            controller.clear();
          },
        )
      ],
    ));
  }
}

class ClearButton extends StatelessWidget {
  const ClearButton({
    Key? key,
    required this.callback,
  }) : super(key: key);

  final VoidCallback callback;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: callback, child: Text("clear"));
  }
}

class TextFiledWidget extends StatelessWidget {
  const TextFiledWidget({
    Key? key,
    required this.controller,
  }) : super(key: key);
  // you can also use callback method
  final TextEditingController controller;

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
    );
  }
}

Answer 3

试试这个，

创建变量

var _controller = TextEditingController();

还有你的TextField:

TextField(
  controller: _controller,
  decoration: InputDecoration(
    hintText: 'Enter a message',
    suffixIcon: IconButton(
      onPressed: _controller.clear,
      icon: Icon(Icons.clear),
    ),
  ),
)

有一个 icon 按下清除 textfield

Flutter：从另一个小部件或屏幕清除文本字段

Flutter : clear textfield from another widget or screen

textfield

flutter