flutter组件之间如何通信

一、子组件调用父组件方法

说明：demo.dart为父组件, child.dart为子组件

关键代码：

// 父组件
Child(
  callback: () {
    print('子组件触发了');
  },
)

// 子组件
onTap: () {
 widget.callback();
}

完整代码：

// 父组件
import 'package:flutter/material.dart';
import 'package:tyt/view/demo/child.dart';

/// 父组件
class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo子组件调用父组件方法')
      ),
      body: Container(
        child: Child(
          callback: () {
            print('子组件触发了');
          },
        ),
      ),
    );
  }
}

// 子组件
import 'package:flutter/material.dart';

/// 子组件
class Child extends StatefulWidget {
  final Function callback;
  Child({this.callback});
  @override
  _ChildState createState() => _ChildState();
}

class _ChildState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: 100,
        height: 30,
        color: Colors.blue,
        margin: EdgeInsets.all(30),
        child: InkWell(
          onTap: () {
            widget.callback();
          },
          child: Text('调用父组件方法'),
        ),
      ),
    );
  }
}

效果

二、父组件调用子组件方法 关键代码：

// 父组件
onTap: () {
 childKey.currentState.updateText();
},
child: Child(
  key: childKey
)

// 子组件
GlobalKey<_ChildState> childKey = GlobalKey();
Child({Key key}) : super(key: key);

完整代码：

// 父组件
import 'package:flutter/material.dart';
import 'package:tyt/view/demo/child.dart';

/// 父组件
class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo父组件调用子组件方法')
      ),
      body: InkWell(
        onTap: () {
          childKey.currentState.updateText();
        },
        child: Child(
          key: childKey
        ),
      )
    );
  }
}

// 子组件
import 'package:flutter/material.dart';

GlobalKey<_ChildState> childKey = GlobalKey();

/// 子组件
class Child extends StatefulWidget {
  Child({Key key}) : super(key: key);
  @override
  _ChildState createState() => _ChildState();
}

class _ChildState extends State {
  String text = '初始值';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: 100,
        height: 30,
        color: Colors.blue,
        margin: EdgeInsets.all(30),
        child: Text('${text}')
      ),
    );
  }

  updateText() {
    text = '改变后的值';
    setState(() {});
  }
}

效果

三、子组件调用子组件方法 关键代码：

EventBus eventBus = EventBus();

eventBus.fire(EventFn({
 'text': '点击之后的文案'
}));

eventBus.on().listen((event) {
    print(event.obj);
  });

完整代码:

// 父组件
import 'package:flutter/material.dart';
import 'package:tyt/view/demo/event_util.dart';

/// 子组件2
class Child2 extends StatefulWidget {
  String testText = '1';
  Child2({Key key, this.testText}) : super(key: key);
  @override
  _Child2State createState() => _Child2State();
}

class _Child2State extends State {
  String text = '初始值';
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 100,
        height: 30,
        color: Colors.blue,
        margin: EdgeInsets.all(30),
        child: InkWell(
          onTap: () {
            print('1111');
            eventBus.fire(EventFn({
              'text': '点击之后的文案'
            }));
          },
          child: Text('${widget.testText}'),
        )
    );
  }

  updateText() {
    text = '改变后的值';
    setState(() {});
  }
}

// 子组件
import 'package:flutter/material.dart';
import 'package:tyt/view/demo/event_util.dart';
import 'package:tyt/view/demo/other.dart';

/// 子组件1
class Child1 extends StatefulWidget {
  Child1({Key key}) : super(key: key);
  @override
  _Child1State createState() => _Child1State();
}

class _Child1State extends State {
  String text = '初始值';
  @override
  void initState() {
    super.initState();
    var ev = eventBus.on().listen((event) {
      print(event.obj);
    });
    print('ev:${ev}');
  }
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 100,
        height: 30,
        color: Colors.blue,
        margin: EdgeInsets.all(30),
        child: Text('1111')
    );
  }

  updateText() {
    text = '改变后的值';
    setState(() {});
  }
}

效果