如何从父小部件中清除 Flutter 文本字段

Question

如何从父控件中清除 Flutter 文本字段

我是 flutter 和 dart 的新手。我正在开发一个计算器类型的应用程序。

I want to clear the text field in the TextFieldContainer1 class from my parent widget Calculator method using method function.

这是包含重置功能的父控件（计算器）。


class Calculator extends StatefulWidget {
  @override
  _CalculatorState createState() => _CalculatorState();
}

class _CalculatorState extends State<Calculator> {

  double soldPrice=0.00;

  reset(){
      soldPrice=0.00;
   }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: BgColor ,
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          borderRadius:BorderRadius.only(topLeft: Radius.circular(10), topRight:Radius.circular(10) ),
          color:YellowBg,
        ),
        alignment: Alignment.center,
        height: 50,

        child: Text('RESET',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.w500,
          letterSpacing: 5,

        ),
        ),
      ),

      body: SafeArea(
              child: Column(
          children: <Widget>[
            SizedBox(height:10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                EcalLogo(logoSize: 30,),  
              ],
            ),
            SizedBox(height:10),


            Padding(
              padding:EdgeInsets.symmetric(horizontal:10.0),
              child:FractionallySizedBox(
                widthFactor: 0.9,
                child: Container(
                height:1.0,
                width:130.0,
                color:Colors.white,),
              ),),

            SizedBox(height: 10,),

            Expanded(
              child:ListView(
                children: <Widget>[

                  TextFieldContainer1(
                    title: 'SOLD PRICE',
                    tagLine: "SALE PRICE WITOHUT SHIPPING",
                    icon: Icons.check_circle,

                     onChange: (val) => setState(() {
                          soldPrice = double.parse(val);

                        })

                  ),

                ],
            ))


          ],
        ),
      )

    );
  }
}

这是子控件 class(TextFieldContainer1)

class TextFieldContainer1 extends StatefulWidget {
  final String title;
  final String tagLine;
  final IconData icon;
  final Function(String) onChange;

  // Function displayFunction;

  TextFieldContainer1({this.title,this.tagLine,this.icon,this.onChange});


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

class _TextFieldContainer1State extends State<TextFieldContainer1> {




  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      widthFactor: 0.95,
        child: Container(

          padding: EdgeInsets.symmetric(horizontal:20, vertical:5),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(10)),
            color: tileBackground,
          ),                      
          height: 57,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children:<Widget>[
              Container(
                child:Column(

                  children:<Widget>[
                    Row(

                      children:<Widget>[
                        Icon(widget.icon,
                        color:Color.fromRGBO(255, 255, 255, 0.7),
                        size:20
                        ),
                        SizedBox(width:15),
                        Text(widget.title,
                        style: TextStyle(

                          fontSize: 20,
                          color:Colors.white,
                          fontWeight: FontWeight.w500
                        ),
                        )
                      ]          
                    ),
                    Text(widget.tagLine,
                    style: TextStyle(
                      color:Color.fromRGBO(255, 255, 255, 0.5),
                      fontSize: 12
                    ),
                    )
                  ]
                )
              ),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 15,vertical: 5),
                decoration: BoxDecoration(
                  color: Color.fromRGBO(252, 205, 0, 0.2),
                  borderRadius: BorderRadius.all(Radius.circular(10)
                  )
                ),
                height: 40,
                width: 92,
                child: TextField(
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20
                  ),
                  autofocus: false,
                  decoration:InputDecoration( 
                    focusColor: YellowBg,
                    fillColor: YellowBg,
                    hoverColor: YellowBg,
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: YellowBg),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: YellowBg),)
                  ) ,
                  keyboardType: TextInputType.number,

                  onChanged: widget.onChange,
                ),
              )
            ],
          ),


      ),
    );
  }
}

如何使用重置功能从我的父窗口小部件计算器中清除 TextFieldContainer1 class 中的文本字段？

Answer 1

使您的文本字段接受控制器：

class TextFieldContainer1 extends StatefulWidget {
  final String title;
  final String tagLine;
  final IconData icon;
  final Function(String) onChange;
  final TextEditingController controller;

  // Function displayFunction;

  TextFieldContainer1({this.title,this.tagLine,this.icon,this.onChange, 
  this.controller});


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

class _TextFieldContainer1State extends State<TextFieldContainer1> {



// also don't forget to dispose the controller 
 @override
  void dispose() {
    super.dispose();
    _controller.dispose();
   }

   }

并像这样在您的小部件中使用它：

class Calculator extends StatefulWidget {
  @override
  _CalculatorState createState() => _CalculatorState();
}

class _CalculatorState extends State<Calculator> {

  final _controller = TextEditingController();
  double soldPrice=0.00;

  reset(){
      soldPrice=0.00;
   }

  @override
  Widget build(BuildContext context) {
   // ....
                  TextFieldContainer1(
                    title: 'SOLD PRICE',
                    tagLine: "SALE PRICE WITOHUT SHIPPING",
                    icon: Icons.check_circle,
                    controller: _controller,
                     onChange: (val) => setState(() {
                          soldPrice = double.parse(val);

                        }),

                  ),

                ],
            ))

void reset() => _controller.clear();

// ....

如何从父小部件中清除 Flutter 文本字段

How to clear Flutter Text Field from parent widget

widget

parent

textfield

dart

flutter

如何从父控件中清除 Flutter 文本字段