我是Flutter开发的新手，我正在一个航空公司预订的应用程序上练习，用户必须通过点击一个按钮来选择飞机的机舱。所以，我不知道提到的按钮和后台功能的类型，有人愿意帮助我吗？
import 'package:flutter/material.dart';
class MyToogleButtons extends StatefulWidget {
const MyToogleButtons({Key? key}) : super(key: key);
@override
State<MyToogleButtons> createState() => _MyToogleButtonsState();
}
class _MyToogleButtonsState extends State<MyToogleButtons> {
List<bool> isSelected = [true, false, false];
@override
Widget build(BuildContext context) {
return ToggleButtons(
fillColor: Theme.of(context).primaryColor,
borderColor: Theme.of(context).primaryColor,
direction: Axis.horizontal,
isSelected: isSelected,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 6),
decoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(
color: Theme.of(context).primaryColor,
)),
child: Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 32.0,
),
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
],
);
}
}
您可以在切换按钮上调用onP的方法并使用like
isSelected: isSelected,
onPressed: (index) {
for (int i = 0; i < isSelected.length; i++) {
isSelected[i] = i == index;
}
setState(() {});
},
完整的部件
class MyToogleButtons extends StatefulWidget {
const MyToogleButtons({Key? key}) : super(key: key);
@override
State<MyToogleButtons> createState() => _MyToogleButtonsState();
}
class _MyToogleButtonsState extends State<MyToogleButtons> {
List<bool> isSelected = [true, false, false];
@override
Widget build(BuildContext context) {
return ToggleButtons(
fillColor: Theme.of(context).primaryColor,
borderColor: Theme.of(context).primaryColor,
direction: Axis.horizontal,
isSelected: isSelected,
onPressed: (index) {
for (int i = 0; i < isSelected.length; i++) {
isSelected[i] = i == index;
}
setState(() {});
},
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 6),
decoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(
color: Theme.of(context).primaryColor,
)),
child: Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 32.0,
),
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
],
);
}
}
