我是扑扑和飞镖的新手。我试图在 ModalBottomSheet 中插入几个单选按钮和一个凸起的按钮。预期的输出是,在从单选按钮中选择任何选项之前,应禁用该按钮,并且一旦选择了任何选项,则应启用该按钮。在我尝试过的代码中,存在一个问题,即当我单击单选按钮时没有被选中,而是在我关闭并重新打开底部弹出屏幕后它们被选中。此外,我无法编写代码来禁用和启用按钮,因为我不知道它。任何建议都会非常有帮助,在此先感谢!
class ReturnReason extends StatefulWidget {
@override
_ReturnReasonState createState() => _ReturnReasonState();
}
class _ReturnReasonState extends State<ReturnReason> {
int selectedRadio;
@override
void initSate() {
super.initState();
selectedRadio = 0;
}
setSelectedRadio(int val) {
setState(() {
selectedRadio = val;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Flutter Project',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.bold,
),
),
backgroundColor: Colors.black12,
iconTheme: IconThemeData(color: Colors.black),
),
body: Center(
child: RaisedButton(
onPressed: () {
_bottomSheet(context);
},
color: Colors.deepPurple,
padding: EdgeInsets.all(10.0),
child: Text(
'Click me',
style: TextStyle(color: Colors.white, fontSize: 18.0),
),
),
),
);
}
_bottomSheet(context) {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height * .80,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
)),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Container(
width: 0.8 * MediaQuery.of(context).size.height,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Select Return Reason'),
],
),
),
Container(
width: 0.8 * MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Improper description'),
Radio(
value: 1,
groupValue: selectedRadio,
onChanged: (val) {
setSelectedRadio(val);
},
),
],
),
),
Divider(),
Container(
width: 0.8 * MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Size issue'),
Radio(
value: 2,
groupValue: selectedRadio,
onChanged: (val) {
setSelectedRadio(val);
},
),
],
),
),
Divider(),
Container(
width: 0.8 * MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Other'),
Radio(
value: 3,
groupValue: selectedRadio,
onChanged: (val) {
setSelectedRadio(val);
},
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 0.9 * MediaQuery.of(context).size.width,
height: 0.075 * MediaQuery.of(context).size.height,
child: RaisedButton(
onPressed: () => {
_bottomSheet2(context)
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
padding: EdgeInsets.all(0.0),
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
borderRadius: BorderRadius.circular(10.0)),
child: GestureDetector(
onTap: () {
_bottomSheet2(context);
},
child: Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width,
minHeight: 0.075 *
MediaQuery.of(context).size.height),
alignment: Alignment.center,
child: Text('Continue'),
),
),
),
),
],
),
],
),
),
));
});
}