5 单选、复选按钮和开关的使用
1.源代码
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool switchValue1 = true;
bool switchValue2 = true;
bool checkValue1 = true;
bool checkValue2 = true;
int radioValue = 1;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Switch(value: switchValue1,
onChanged:(value){
setState(() {
switchValue1 = value;
});
}
),
SwitchListTile(
title: Text("第二个开关"),
value: switchValue2,
onChanged:(value){
setState(() {
switchValue2 = value;
});
}
),
Checkbox(
checkColor: Colors.yellowAccent,
activeColor: Colors.grey,
value: checkValue1,
onChanged: (value) {
setState(() {
checkValue1 = value;
});
}
),
CheckboxListTile(
title: Text("第二个复选按钮"),
value: checkValue2,
onChanged: (value) {
setState(() {
checkValue2 = value;
});
}
),
Radio(
value: 1,
groupValue: radioValue,
onChanged: (value){
setState(() {
radioValue = value;
});
}
),
RadioListTile(
title: Text("第二个单选按钮"),
value: 2,
groupValue: radioValue,
onChanged: (value){
setState(() {
radioValue = value;
});
}
),
RadioListTile(
title: Text("第三个单选按钮"),
value: 3,
groupValue: radioValue,
onChanged: (value){
setState(() {
radioValue = value;
});
}
)
],
),
)
)
);
}
}
2.解释源代码
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
//设置开关、单选、复选按钮的默认值
bool switchValue1 = true;
bool switchValue2 = true;
bool checkValue1 = true;
bool checkValue2 = true;
int radioValue = 1;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//开关 value值为true 即选中状态
Switch(value: switchValue1,
//回调,改变状态
onChanged:(value){
setState(() {
switchValue1 = value;
});
}
),
//带文字开关 value值为true 即选中状态
SwitchListTile(
title: Text("第二个开关"),
value: switchValue2,
onChanged:(value){
setState(() {
switchValue2 = value;
});
}
),
//复选按钮 value值为true 即选中状态
Checkbox(
//选中的✔ 颜色
checkColor: Colors.yellowAccent,
//选中的框框背景颜色
activeColor: Colors.grey,
value: checkValue1,
onChanged: (value) {
setState(() {
checkValue1 = value;
});
}
),
//带文字的复选按钮 value值为true 即选中状态
CheckboxListTile(
title: Text("第二个复选按钮"),
value: checkValue2,
onChanged: (value) {
setState(() {
checkValue2 = value;
});
}
),
//单选按钮 value值=groupValue值 即选中状态
Radio(
value: 1,
groupValue: radioValue,
onChanged: (value){
setState(() {
radioValue = value;
});
}
),
//带文字的单选按钮 value值=groupValue值 即选中状态
RadioListTile(
title: Text("第二个单选按钮"),
value: 2,
groupValue: radioValue,
onChanged: (value){
setState(() {
radioValue = value;
});
}
),
//带文字的单选按钮 value值=groupValue值 即选中状态
RadioListTile(
title: Text("第三个单选按钮"),
value: 3,
groupValue: radioValue,
onChanged: (value){
setState(() {
radioValue = value;
});
}
)
],
),
)
)
);
}
}