Flutter - 类与方法的调用

Flutter中所有的State是由 祖先 -> 父 -> 子 传递，一般不支持反向传递。

第一种：普通调用

所有方法都写在父组件中，正常调用

第二种：VoidCallback

在子类中使用VoidCallback定义一个方法，在父组件中直接使用父组件中的方法
例：

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  int curNum = 0;

  add() {
    setState(() {
      curNum += 1;
    });
  }
  
  minus() {
    setState(() {
      curNum -= 1;
    });
  }
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AddBtn(
              addMethod: add,
            ),
            Container(
              child: Text(
                '$curNum',
                style: TextStyle(fontSize: 30),
              ),
            ),
            MinusBtn(
              minusMethod: minus,
            ),
          ],
        ),
      ),
    );
  }
}

class AddBtn extends StatelessWidget {
  const AddBtn({Key key, this.addMethod}) : super(key: key);
  final VoidCallback addMethod;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FlatButton(
          child: Text(
            '+',
            style: TextStyle(fontSize: 30),
          ),
          onPressed: () {
            addMethod();
          }),
    );
  }
}

class MinusBtn extends StatelessWidget {
  const MinusBtn({Key key, this.minusMethod}) : super(key: key);
  final VoidCallback minusMethod;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FlatButton(
          child: Text(
            '-',
            style: TextStyle(fontSize: 30),
          ),
          onPressed: () {
            minusMethod();
          }),
    );
  }
}

第三种：Provider

利用provider将状态管理和实际页面进行抽离
将所有的方法都写在provider中，调用时定义provider，然后直接使用provider中的方法
例：
MainProvider.dart

class MainProvider extends ChangeNotifier{
  int curNum=0;
  add(){
    curNum +=1;
    notifyListeners();
  }

  minus(){
    curNum -=1;
    notifyListeners();
  }
}

main.dart

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      home: MultiProvider(providers: [
        ChangeNotifierProvider(
          create: (context) => MainProvider(),
        )
      ], child: Home()),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    int curNum;
    MainProvider provider = Provider.of<MainProvider>(context);
    curNum = provider.curNum;
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AddBtn(),
            Container(
              child: Text(
                '$curNum',
                style: TextStyle(fontSize: 30),
              ),
            ),
            MinusBtn(),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    MainProvider provider = Provider.of<MainProvider>(context);
    return Container(
      child: FlatButton(
        child: Text(
          '-',
          style: TextStyle(fontSize: 30),
        ),
        onPressed: () {
          provider.minus();
        },
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    MainProvider provider = Provider.of<MainProvider>(context);
    return Container(
      child: FlatButton(
        child: Text(
          '+',
          style: TextStyle(fontSize: 30),
        ),
        onPressed: () {
          provider.add();
        },
      ),
    );
  }
}

provider的优势

前两种调用方法需使用StatefulWidget，而使用provider只需要使用StatelessWidget，不用过多或者重复渲染页面，开发中推荐使用provider