如何在底页颤动中设置单选按钮答案

【问题标题】：How to set radio buttons in bottomsheet flutter如何在底页颤动中设置单选按钮
【发布时间】：2020-09-29 07:30:55
【问题描述】：

我想做一个设计，通过点击底部的工作表，它会显示单选按钮。当我选择单选按钮时，它将打开日期选择器。下面是我单击单选按钮时的代码，它没有选择单选按钮。我是 Flutter 新手，谁能帮我找出代码中的错误？

import 'package:flutter/material.dart';

import 'BottomSheetWidget.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Flutter Demo', home: HomeView());
  }
}

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: MyFloatingButton(),
    );
  }
}

class MyFloatingButton extends StatefulWidget {
  @override
  _MyFloatingButtonState createState() => _MyFloatingButtonState();
}

class _MyFloatingButtonState extends State<MyFloatingButton> {
  bool _show = true;
  @override
  Widget build(BuildContext context) {
    int _radioValue = 0;
    /* var sheetController = showBottomSheet(
        context: context,
        builder: (context) => BottomSheetWidget());*/
    void _handleRadioValueChange(int value) {
      setState(() {
        _radioValue = value;
      });
      print("first"+value.toString()+"radiovalue" +_radioValue.toString());

    }
    return  Container(
      margin: EdgeInsets.all(10.0),
      child: new Wrap(
        children: <Widget>[
          Center(
              child: Container(
                  height: 3.0, width: 40.0, color: Color(0xFF32335C))),
          SizedBox(
            height: 10.0,
          ),
          new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              new Radio(
                value: 0,
                groupValue: _radioValue,
                onChanged: (value) {setState(() {
                  _radioValue=value;
                });
                print("radiofirst"+value.toString()+"radiovalue" +_radioValue.toString());
                _handleRadioValueChange(value);
                },
              ),
              new Text(
                'Single Date',
                style: new TextStyle(fontSize: 16.0),
              ),
              new Radio(
                value: 1,
                groupValue: _radioValue,
                onChanged:  (value) {setState(() {
                  _radioValue=value;
                });
                print("radiosecond "+value.toString()+"radiovalue " +_radioValue.toString());
                _handleRadioValueChange(value);
                },
              ),
              new Text(
                'Dual Date',
                style: new TextStyle(
                  fontSize: 16.0,
                ),
              ),
            ],
          ),


        ],
      ),
    );
  }

}

【问题讨论】：

int _radioValue = 0;，把它放在 build Widget 上面，@override 上面

标签： flutter radio-button mobile-application

【解决方案1】：

您可以在下面复制粘贴运行完整代码
你可以从build搬出int _radioValue = 0;和_handleRadioValueChange

工作演示

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Flutter Demo', home: HomeView());
  }
}

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: MyFloatingButton(),
    );
  }
}

class MyFloatingButton extends StatefulWidget {
  @override
  _MyFloatingButtonState createState() => _MyFloatingButtonState();
}

class _MyFloatingButtonState extends State<MyFloatingButton> {
  bool _show = true;
  int _radioValue = 0;
  /* var sheetController = showBottomSheet(
        context: context,
        builder: (context) => BottomSheetWidget());*/
  void _handleRadioValueChange(int value) {
    setState(() {
      _radioValue = value;
    });
    print("first" + value.toString() + "radiovalue" + _radioValue.toString());
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10.0),
      child: Wrap(
        children: <Widget>[
          Center(
              child: Container(
                  height: 3.0, width: 40.0, color: Color(0xFF32335C))),
          SizedBox(
            height: 10.0,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Radio(
                value: 0,
                groupValue: _radioValue,
                onChanged: (value) {
                  setState(() {
                    _radioValue = value;
                  });
                  print("radiofirst" +
                      value.toString() +
                      "radiovalue" +
                      _radioValue.toString());
                  _handleRadioValueChange(value);
                },
              ),
              Text(
                'Single Date',
                style: TextStyle(fontSize: 16.0),
              ),
              Radio(
                value: 1,
                groupValue: _radioValue,
                onChanged: (value) {
                  setState(() {
                    _radioValue = value;
                  });
                  print("radiosecond " +
                      value.toString() +
                      "radiovalue " +
                      _radioValue.toString());
                  _handleRadioValueChange(value);
                },
              ),
              Text(
                'Dual Date',
                style: TextStyle(
                  fontSize: 16.0,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

【讨论】：