Flutter学习

[vnues]

组件通信

父子组件之间通信：父组件可以通过构造函数将数据传递给子组件，并通过子组件的属性来接收和使用这些数据。子组件可以通过回调函数将数据传递回父组件。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Parent-Child Communication',
      home: ParentWidget(),
    );
  }
}

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  String message = 'Hello from parent';

  void updateMessage(String newMessage) {
    setState(() {
      message = newMessage;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Parent Widget'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(message),
          ChildWidget(message: message, updateMessage: updateMessage),
        ],
      ),
    );
  }
}

class ChildWidget extends StatelessWidget {
  final String message;
  final Function(String) updateMessage;

  ChildWidget({this.message, this.updateMessage});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Column(
        children: [
          Text('Child Widget'),
          RaisedButton(
            child: Text('Update Message'),
            onPressed: () {
              updateMessage('New message from child');
            },
          ),
        ],
      ),
    );
  }
}

在上面的例子中，父组件是ParentWidget，子组件是ChildWidget。父组件通过构造函数将message数据传递给子组件，子组件接收并显示这个数据。子组件中的按钮被点击后，调用父组件传递的updateMessage回调函数，将新的消息传递给父组件并更新界面。

这样，父子组件之间就通过构造函数和属性实现了数据的传递和更新。