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

Question

如果我讓這個屏幕包含一些小部件：

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

文本字段小部件是無狀態小部件，返回帶有 controller 的文本字段，稱為“顏色”。

ClearButton 小部件返回提升的按鈕，我希望在按下按鈕時清除文本字段文本。 我怎樣才能做到這一點。

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