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

Question

如果我的屏幕包含一些小部件：

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

文本字段小部件是无状态小部件，返回带有名为“颜色”的控制器的文本字段。

ClearButton 小部件返回提升的按钮，我希望当按下该按钮时，文本字段文本会清除。 我该怎么办呢。

Answer 1

你可以玩它。

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 2

你可以试试这个

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 3

试试这个，

创建一个变量

var _controller = TextEditingController();

和你的 TextField：

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

有一个 icon 按下后会清除 文本字段