Flutter Dart传参给MainPage构造器返回null 原参数非空问题求解

• 核心逻辑错误：你在Cards组件的点击事件中创建的Mainpage是临时独立实例，和当前渲染在界面上的父级Mainpage组件没有任何关联，你给这个临时实例传参不会更新已渲染页面的状态。
• 传值方向逻辑错误：Mainpage是父组件，Cards是嵌入在Mainpage中的子组件，子组件向父组件传值不能通过直接实例化父组件实现，需要通过回调函数实现状态同步。
• 冗余无效代码：你在Mainpage的按钮点击事件中创建的Cards实例同样是临时对象，不会生效，只要你在setState中修改了cardDrop变量，build方法中绑定的Cards组件参数会自动更新，不需要额外实例化。

步骤1：修改Cards组件，新增回调参数 #

class Cards extends StatefulWidget {
  const Cards({Key? key, this.cardStatus, required this.onUserPickCard}) : super(key: key);
  final bool? cardStatus;
  // 新增回调函数，用于将选中的卡牌值传递给父组件
  final Function(String pickedCard) onUserPickCard;

  @override
  State<Cards> createState() => _CardsState();
}

步骤2：修改Cards的点击事件，删除无效的Mainpage实例化代码，改为调用回调 #

onTap: () {
  setState(() {
    userPickedList!.add(list[index]);
    widget.cardStatus! ? list.removeAt(index) : null;
    // 调用回调传值给父组件
    widget.onUserPickCard(userPickedList!.last);
    print(userPickedList?.last);
  });
}

步骤3：修改Mainpage组件，新增状态变量存储选中的卡牌值，给Cards绑定回调 #

class _MainpageState extends State<Mainpage> {
  bool cardDrop = false;
  // 新增状态变量存储子组件传回来的选中值
  String? currentUserPick;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          bottom: 0,
          child: Container(
            color: Colors.white,
            // 绑定回调，接收子组件传值后更新状态
            child: Cards(
              cardStatus: cardDrop,
              onUserPickCard: (pickedCard) {
                setState(() {
                  currentUserPick = pickedCard;
                });
              },
            ),
          ),
        ),
        // 其余布局代码不变
        Positioned(
          top: MediaQuery.of(context).size.height / 3.5,
          left: MediaQuery.of(context).size.width / 1.8,
          child: Container(
            padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
            height: MediaQuery.of(context).size.height / 4,
            width: MediaQuery.of(context).size.height / 6,
            color: Colors.black,
            child: Center(
              // 改为使用本地状态变量显示
              child: Text(
                currentUserPick ?? '未选择卡牌',
                style: const TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
        Positioned(
          top: MediaQuery.of(context).size.height / 2,
          right: MediaQuery.of(context).size.width / 38,
          child: GestureDetector(
            onTap: () {
              setState(() {
                cardDrop = true;
                // 删除无效的Cards实例化代码
                if (widget.tappedStatus == true) {
                  cardDrop = false;
                }
              });
            },
            // 按钮其余代码不变
          ),
        )
      ],
    );
  }
}

内容的提问来源于stack exchange，提问作者Joshua Jenny Sibbu