Flutter中BottomSheet内RadioButton选中状态不实时更新求助

Hey there! Let's get that real-time radio button selection working in your BottomSheet. The core issue is how you're managing state and triggering rebuilds for the modal sheet—here's the breakdown and fix:

What's Going Wrong #

1. Wrong State Placement: You stored radioValue1 in the DashboardFilter StatefulWidget class. StatefulWidgets are immutable, so any changes to variables here won't trigger proper rebuilds. This variable belongs in the _DashboardFilterState class instead.
2. Incorrect Rebuild Trigger: When you select a radio button, you're calling the outer State's setState(), but the BottomSheet has its own separate context. The outer setState() won't refresh the modal's UI. You already added StatefulBuilder (great call!), but you weren't using its provided StateSetter to update the sheet's state.

Fixed Code #

Here's the updated version of your filter.dart code with these issues resolved:

class DashboardFilter extends StatefulWidget {
  final ValueChanged<Map<String, bool>> parentAction;
  final ValueChanged<Map<String, bool>> childAction;

  DashboardFilter({Key key, this.parentAction, this.childAction})
      : super(key: key);

  @override
  _DashboardFilterState createState() => _DashboardFilterState();
}

class _DashboardFilterState extends State<DashboardFilter> {
  // Move radioValue1 to the State class where state changes should live
  int radioValue1 = -1;

  void showModalSheet() {
    List<Map<String, Object>> timeData = [
      {"id": 1, "displayId": "Daily"},
      {"id": 2, "displayId": "Weekly"},
      {"id": 3, "displayId": "Monthly"}
    ];

    showModalBottomSheet<void>(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      context: context,
      builder: (BuildContext context) {
        return StatefulBuilder(
          builder: (BuildContext context, StateSetter sheetSetState) {
            // Pass the sheet's StateSetter to createBox
            return createBox(context, timeData, sheetSetState);
          },
        );
      },
    );
  }

  Widget createBox(BuildContext context, List<Map<String, Object>> tickbox, StateSetter sheetSetState) {
    var tickboxdata = tickbox.map<Widget>((data) {
      int id = data["id"];
      var dispId = data["displayId"];
      // Pass the sheet's StateSetter to radiogen
      return radiogen(context, id, dispId, sheetSetState);
    }).toList();

    return SingleChildScrollView(
      child: LimitedBox(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Column(
                children: tickboxdata,
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _handleRadioValueChange1(int value, StateSetter sheetSetState) {
    // Use the BottomSheet's StateSetter to update its state
    sheetSetState(() {
      radioValue1 = value;
      switch (radioValue1) {
        case 1:
          print("1 selected");
          break;
        case 2:
          print("2 selected");
          break;
        case 3:
          print("3 selected");
          break;
      }
    });
  }

  Widget radiogen(BuildContext context, int id, var disp, StateSetter sheetSetState) {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Radio(
                value: id,
                // Use the State class's radioValue1 instead of widget's
                groupValue: radioValue1,
                onChanged: (value) => _handleRadioValueChange1(value, sheetSetState),
              ),
              Text(
                disp,
                style: TextStyle(fontSize: 16.0),
              ),
            ],
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: IconButton(
        icon: Icon(Icons.more_horiz),
        onPressed: showModalSheet,
      ),
    );
  }
}

Key Changes Explained #

• Moved radioValue1: Now it's in _DashboardFilterState, where mutable state should reside for StatefulWidgets.
• Used sheetSetState: We pass the StateSetter from StatefulBuilder down to the radio button's onChanged handler. This ensures that when a radio button is selected, we trigger a rebuild specifically for the BottomSheet's UI.
• Updated Radio Group Value: The groupValue now references the State class's radioValue1, so it correctly reflects the current selected state.

This should make your radio buttons update their selected state immediately when tapped, no need to close and reopen the BottomSheet!

内容的提问来源于stack exchange，提问作者mark