前言

今日的程序码 => GITHUB

继承

Flutter 会有三个方式

1. Extends

• 当继承 Extends 的时候，需要使用 super 来继承父类别的 method.
• 继承一次只能继承一个父亲类别
• 建构函数不能继承
• 调用父类别的 method 需要使用 super
• 可以覆写父亲类别的 method

 @override
 void animal() {
   // TODO: implement animal
   super.animal();
 }

2. With

• 可以直接使用父亲的 method
• 可以混合很多个

3. implements

• class 就是 interface
• 需要实作介面。
• 可以实作很多个介面

class Animal {
  void animal() {}
}

class Fly {
  String className = "carton";

  void fly() {}
}

class Swim {
  void swimming() {}
}

class Eat {
  void eat() {}
}

class Draink {
  void drink() {}
}

class AAA extends Animal with Eat, Draink implements Fly, Swim {
  @override
  String className = "AAA";

  void turnOn() {
    super.animal();
    _test();
    eat();
    drink();
  }

  void _test() {}

  @override
  void fly() {
    // TODO: implement Fly
  }

  @override
  void swimming() {
    // TODO: implement Swim
  }
}

建构子

StatelessWidget

1. 给予预设值(可以传参数，也可以不传)

class MyWidget extends StatelessWidget {
  
  final String title;
  
  const MyWidget({Key? key, this.title = 'abc'}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(title);
  }
}

MyWidget(title: 'cc'), // 显示 cc 
MyWidget(), // 显示 abc

2. Required（被要求一定要传参数）

class MyWidget extends StatelessWidget {

  final String title;

  const MyWidget({Key? key,required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(title);
  }
}

MyWidget(title: 'cc'), // 显示 cc 

3. 私有化的参数

class MyWidget extends StatelessWidget {

  final String _title;

  const MyWidget({String title = '3'}) : _title = title;
  // const MyWidget({required String title}) : _title = title;

  @override
  Widget build(BuildContext context) {
    return Text(_title);
  }
}

StatefulWidget

1. 给予预设值(可以传参数，也可以不传)

class MyWidget extends StatefulWidget {

  final String title;

  const MyWidget({Key? key, this.title = 'abc'}) : super(key: key);

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

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Text(widget.title);
  }
}

MyWidget(title: 'cc'), // 显示 cc 
MyWidget(), // 显示 abc

2. Required（被要求一定要传参数）

class MyWidget extends StatefulWidget {

  final String title;

  const MyWidget({Key? key,required this.title}) : super(key: key);

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

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Text(widget.title);
  }
}

MyWidget(title: 'cc'), // 显示 cc 

3. 私有化的参数

class MyWidget extends StatefulWidget {

  final String _title;

  const MyWidget({String title = '3'}) : _title = title;

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

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Text(widget._title);
  }
}

CallBack

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: TextView(
        callback: (String text) => _showDialog(context, text)),
    );
  }

  void _showDialog(BuildContext context, String text) {
    showDialog<void>(
        context: context, builder: (context) => AlertDialog(title: Text(text)));
  }
}

class TextView extends StatefulWidget {
  const TextView({required this.callback});

  final void Function(String text) callback;

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

class _TextViewState extends State<TextView> {
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextFormField(controller: _controller),
        IconButton(
          onPressed: () async => widget.callback(_controller.text),
          icon: Icon(Icons.check),
        )
      ],
    );
  }
}

我们现在假设有一个情境：

• 我的子元件是一个输入匡，我的父元件是一个 Scaffold，里面有一个 showDialog 的 method
• 今天我需要在父元件里面取得子元件输入匡的文字传给 showDailog。

1. 确定我们关键参数是什麽。是输入匡的文字。因此在 TextView 这个 class 里面建立一个 function

final void Function(String text) callback;
final Function callback; // 这样也可以，但是不建议，因为这样很难 DeBug

2. 并要求父元件一定要有这个方法

const TextView({required this.callback});

3. 接着我们在按钮的 onPressed call 这个 function

onPressed: () async => widget.callback(_controller.text),

4. 当我们在父亲元件使用 TextView 这个子元件时，callback 里面的 text 就是我们子元件输入匡的 text 了。

TextView(callback: (String text) {  },),