Flutter父子组件传值之Radio

创建子组件

import 'package:flutter/material.dart';

class GenderRadioView extends StatefulWidget {
  late String? title;
  late ValueChanged? valueChanged;

  GenderRadioView({Key? key, this.title, this.valueChanged}) : super(key: key);

  @override
  State createState() => _GenderRadioViewState();
}

class _GenderRadioViewState extends State {

  // @override
  // void initState() {
  //   super.initState();
  //   _gender = widget.gender?? '未知';
  //   print("initState");
  // }

  @override
  Widget build(BuildContext context) {
    return Row(children: [
      SizedBox(width: 20),
      Text('data: ${widget.title}'),
      SizedBox(width: 20),
      _colorfulCheckBox('男'),
      _colorfulCheckBox('女'),
      _colorfulCheckBox('其他'),
    ]);
  }

  Widget _hehe() {
    return Radio(
        value: '男', groupValue: 'groupValue', onChanged: (value) => {});
  }

  Widget _colorfulCheckBox(String gender) {
    return Row(children: [
      SizedBox(child: Text(gender), width: 10),
      Radio(
        value: gender,
        groupValue: widget.title,
        onChanged: (String? value) {
          print(value);
          // widget.title = value;
          setState(() {
            widget.title = value ?? '';
          });
          print('xxx:${widget.title}');

          if(widget.valueChanged != null) {
            widget.valueChanged!(value);
          }
        },
      )
    ]);
  }
}

创建父组件

class SettingsView extends StatefulWidget {
  const SettingsView({Key? key}) : super(key: key);

  @override
  State createState() => _SettingsViewState();
}

class _SettingsViewState extends State {

  RxInt count = RxInt(1);
  RxString gender = RxString('男');

  void increate(){
    count++;
    print('${count} - ${gender.value}');
  }

  @override
  void initState() {
    super.initState();

    _createAsyncTest1();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('首页'),
        ),
        body: Center(
            child: Column(children: [
              Padding(padding: EdgeInsets.only(top: 10, bottom: 10)),
              // GenderRadioView(title: gender.value, valueChanged: (value) {
              //   gender.value = value;
              // }),
              Obx(()=> GenderRadioView(title: gender.value, valueChanged: (value) {
                gender.value = value;
              })),
              Obx(()=> Text('xxxx::${count} - ${gender.value}')),
              ElevatedButton(onPressed: increate, child: Text('点击+1'))
            ])));
  }

  void _createAsyncTest1() {
    Future.delayed(Duration(seconds: 5), () {
      return "女";
    }).then((data) {
      print(data);
      gender.value = data;
      // setState(() {
      //   gender.value = data;
      // });
    });
  }

  void _createAsyncTest2() {
    Future.delayed(Duration(seconds: 2), () {
      //return "hi world!";
      throw AssertionError("Error");
    }).then((data) {
      //执行成功会走到这里
      print("success");
    }).catchError((e) {
      //执行失败会走到这里
      print(e);
    });
  }

  void _createAsyncTest3() {
    Future.delayed(Duration(seconds: 2), () {
      //return "hi world!";
      throw AssertionError("Error");
    }).then((data) {
      //执行成功会走到这里
      print(data);
    }).catchError((e) {
      //执行失败会走到这里
      print(e);
    }).whenComplete(() {
      //无论成功或失败都会走到这里
    });
  }

  void _createAsyncTest4() {
    Future.wait([
      // 2秒后返回结果
      Future.delayed(Duration(seconds: 2), () {
        return "hello";
      }),
      // 4秒后返回结果
      Future.delayed(Duration(seconds: 4), () {
        return " world";
      })
    ]).then((results) {
      print(results[0] + results[1]);
    }).catchError((e) {
      print(e);
    });
  }
}

实现效果

image.png

如此，父传子、子传父都实现了