嵌套Widget

方便随时调用，可以在一个Widget中调用另外一个Widget

基本使用

父层Widget

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        childContent(),
        childContent(),
      ]
    );
  }
}

子层Widget

class childContent extends StatefulWidget {
  const childContent({super.key});

  @override
  State<childContent> createState() => _childContentState();
}

class _childContentState extends State<childContent> {
  @override
  Widget build(BuildContext context) {
    return Text("Hello World!");
  }
}

携带参数

父层Widget

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        childContent(msg: "Hello"), 
        childContent(msg: "World!"),  
      ]
    );
  }
}

子层Widget

class childContent extends StatefulWidget {
  final String msg; 

  const childContent({super.key});  
  const childContent({super.key, required this.msg}); 

  @override
  State<childContent> createState() => _childContentState();
}

class _childContentState extends State<childContent> {
  @override
  Widget build(BuildContext context) {
    // 注意调用参数时候添加widget
    return Text(widget.msg);  
  }
}

携带可选参数

父层Widget

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        childContent(), 
        childContent(msg: "World!"),  
      ]
    );
  }
}

子层Widget

class childContent extends StatefulWidget {
  final String msg; 

  const childContent({super.key});  
  const childContent({super.key, this.msg = "Hello"}); 

  @override
  State<childContent> createState() => _childContentState();
}

class _childContentState extends State<childContent> {
  @override
  Widget build(BuildContext context) {
    // 默认为"Hello"
    return Text(widget.msg);  
  }
}

携带回调函数

父层Widget

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  void fun(){
    print("Hello world!");
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        childContent(functionCallBack: () => fun()),  
        childContent(functionCallBack: () => fun()),  
        // 或者可以直接这样使用:
        // childContent(functionCallBack: fun),
      ]
    );
  }
}

子层Widget

class childContent extends StatefulWidget {
  final VoidCallback functionCallBack;  

  const childContent({super.key});  
  const childContent({super.key, required this.functionCallBack});  

  @override
  State<childContent> createState() => _childContentState();
}

class _childContentState extends State<childContent> {
  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () => widget.functionCallBack(), 
      child: Text("按钮"),
    );
  }
}

WARNING

使用VoidCallback类型的回调函数不能添加任何参数

携带有参数的回调函数

父层Widget

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  void fun(val){
    print(val);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        childContent(functionCallBack: (val) => fun(val)),  
        childContent(functionCallBack: (val) => fun(val)),  
        // 或者可以直接这样使用:
        // childContent(functionCallBack: fun),
      ]
    );
  }
}

子层Widget

class childContent extends StatefulWidget {
  final ValueChanged functionCallBack;  

  const childContent({super.key});  
  const childContent({super.key, required this.functionCallBack});  

  @override
  State<childContent> createState() => _childContentState();
}

class _childContentState extends State<childContent> {
  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () => widget.functionCallBack("Hello!"), 
      child: Text("按钮"),
    );
  }
}

TIP

使用VoidCallback类型的回调函数只能添加一个参数，如果需要携带多个参数，可以将其打包成Map类型的参数传递：

void callBackFunction(){
  var val={
    msg: "Hello world!",
    code: 0,
  };
  widget.functionCallBack(val);
}