1. Radio组件
-
单选框组件,为一组时,选择关系互斥
//横向排列三个单选框,并把选择的值debug输出 child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Radio( activeColor: Colors.red, value: "option 1", groupValue: _groupValue, onChanged: (value){ setState((){ _groupValue = value; debugPrint(_groupValue); }); }, ), Radio( activeColor: Colors.green, value: "option 2", groupValue: _groupValue, onChanged: (value){ setState((){ _groupValue = value; debugPrint(_groupValue); }); }, ), Radio( activeColor: Colors.blue, value: "option 3", groupValue: _groupValue, onChanged: (value){ setState((){ _groupValue = value; debugPrint(_groupValue); }); }, ), ] )
-
代码样式
-
带文字及图标的单选框
child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RadioListTile<String>( secondary: const Icon(Icons.airline_seat_individual_suite), value: '休息', title: Text('休息'), groupValue: _groupValue, onChanged: (value){ setState(() { _groupValue=value; }); }, ), RadioListTile<String>( secondary: const Icon(Icons.accessibility), value: '运动', title: Text('运动'), groupValue: _groupValue, onChanged: (value){ setState(() { _groupValue=value; }); }, ), RadioListTile<String>( secondary: const Icon(Icons.airline_seat_recline_extra), value: '学习', title: Text('学习'), groupValue: _groupValue, onChanged: (value){ setState(() { _groupValue=value; }); }, ), RaisedButton( onPressed: (){ final snackBar = SnackBar(content: Text('你选择的是$_groupValue'),); Scaffold.of(context).showSnackBar(snackBar); }, child: Text('确定'), ), ], ),
-
代码样式
源码
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: RadioAres(),
),
),
);
}
}
class RadioAres extends StatefulWidget{
@override
State<StatefulWidget> createState(){
return RadioAresState();
}
}
class RadioAresState extends State<RadioAres> {
var _groupValue;
@override
Widget build(BuildContext context){
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("横向单选框"),
RadioRowArea(),
Text("纵向单选框带Icon及文字"),
RadioListTile<String>(
secondary: const Icon(Icons.airline_seat_individual_suite),
value: '休息',
title: Text('休息'),
groupValue: _groupValue,
onChanged: (value){
setState(() {
_groupValue=value;
});
},
),
RadioListTile<String>(
secondary: const Icon(Icons.accessibility),
value: '运动',
title: Text('运动'),
groupValue: _groupValue,
onChanged: (value){
setState(() {
_groupValue=value;
});
},
),
RadioListTile<String>(
secondary: const Icon(Icons.airline_seat_recline_extra),
value: '学习',
title: Text('学习'),
groupValue: _groupValue,
onChanged: (value){
setState(() {
_groupValue=value;
});
},
),
RaisedButton(
onPressed: (){
final snackBar = SnackBar(content: Text('你选择的是$_groupValue'),);
Scaffold.of(context).showSnackBar(snackBar);
},
child: Text('确定'),
),
],
),
);
}
}
class RadioRowArea extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return RadioRowAreaState();
}
}
class RadioRowAreaState extends State<RadioRowArea>{
var _groupValue;
@override
Widget build(BuildContext context) {
return Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Radio(
activeColor: Colors.red,
value: "option 1",
groupValue: _groupValue,
onChanged: (value){
setState((){
_groupValue = value;
debugPrint(_groupValue);
});
},
),
Radio(
activeColor: Colors.green,
value: "option 2",
groupValue: _groupValue,
onChanged: (value){
setState((){
_groupValue = value;
debugPrint(_groupValue);
});
},
),
Radio(
activeColor: Colors.blue,
value: "option 3",
groupValue: _groupValue,
onChanged: (value){
setState((){
_groupValue = value;
debugPrint(_groupValue);
});
},
)
],
),
);
}
}