如何解决在Flutter中按切换开关上的小部件
我正在尝试为扑扑的ToggleSwitch实现小部件交换。到目前为止,我已经解决了分别更改小部件和toggleSwitch的交换的问题。我需要将它们组合起来,这样当我选择一个拨动开关时,它将显示它需要显示的小部件,而当另一个拨动开关单击第二个小部件时,它就会显示出来。 即使当我工作的窗口小部件正在交换时,ToggleSwitch也不会更改其状态。 请帮助我改善这一点。非常感谢。
这是我要计算的build()代码段。
Widget build(BuildContext context) {
final petHeader = Container(
alignment: Alignment.center,color: Colors.white,width: MediaQuery.of(context).size.width,child: Row(
children: [
Expanded(
flex: 2,child: Hero(
tag: 'hero',child: Padding(
padding: EdgeInsets.all(4.0),child: CircleAvatar(
radius: 30.0,backgroundColor: Colors.grey[300],child: Image(
image: AssetImage(
'assets/images/logo_small.png',),Expanded(
flex: 3,child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.start,mainAxisSize: MainAxisSize.min,children: [
Text(
'Dog Name',style: TextStyle(fontSize: 20.0,color: Colors.black87),Text(
'Age',style: TextStyle(fontSize: 12.0,],Expanded(
flex: 5,child: Container(
margin: EdgeInsets.symmetric(
horizontal: 12.0,child: Text(
'Daily Guide',style: TextStyle(fontSize: 32.0,textAlign: TextAlign.end,);
final macroCharts = Center(
child: Text('macro chart here'),);
final microCharts = Center(
child: Text('micro chart here'),);
Widget getMacroChart(){
return Center(
child: Text('macro chart here'),);
}
Widget getMicroChart(){
return Center(
child: Text('micro chart here'),);
}
Widget getCustomContainer() {
switch (selectedWidget) {
case widgetMarker.macro:
return getMacroChart();
case widgetMarker.micro:
return getMicroChart();
}
return getMacroChart();
}
final userSaveBtn = Container(
margin: EdgeInsets.only(top: 2.0,bottom: 4.0),alignment: Alignment.center,// width: MediaQuery.of(context).size.width,child: ToggleSwitch(
cornerRadius: 4.0,minWidth: MediaQuery.of(context).size.width,minHeight: MediaQuery.of(context).size.height,fontSize: 20.0,initialLabelIndex: 0,activeBgColor: Color(0xFF03B898),activeFgColor: Colors.white,inactiveBgColor: Colors.grey[300],inactiveFgColor: Colors.black54,labels: [' Macro\nNutrients',' Micro\nNutrients'],onToggle: (index) {
print('switched to: $index');
setState(() {
_swapNutrients = !_swapNutrients;
});
},);
var swapTile = new Container(
child: _swapNutrients ? macroCharts : microCharts,);
final body =
Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,crossAxisAlignment: CrossAxisAlignment.center,children: [
Expanded(
flex: 3,child: Container(
width: MediaQuery.of(context).size.width,color: Colors.transparent,child: Card(
child: Padding(
padding: EdgeInsets.all(4.0),child: Text(
'Welcome Alucard',style: TextStyle(fontSize: 28.0,Expanded(
flex: 6,child: Card(
color: Colors.white,child: Padding(
padding: const EdgeInsets.only(top: 8.0),child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,children: [
Expanded(
flex: 1,child: userSaveBtn,Expanded(
flex: 7,child: Container(
width: MediaQuery.of(context).size.width,child: swapTile,//getCustomContainer(),);
final lorem = Padding(
padding: EdgeInsets.all(8.0),child: Text(
'Lorem ipsum dolor sit amet,consectetur adipiscing elit. Donec hendrerit condimentum mauris id tempor. Praesent eu commodo lacus. Praesent eget mi sed libero eleifend tempor. Sed at fringilla ipsum. Duis malesuada feugiat urna vitae convallis. Aliquam eu libero arcu.',style: TextStyle(fontSize: 16.0,color: Colors.white),);
final mainBody = Container(
margin: EdgeInsets.only(
top: 16.0,padding: EdgeInsets.only(
top: 12.0,decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,end: Alignment.bottomCenter,stops: [0.5,1.0],colors: [
Color(0xFF03B898),Color(0xFF01816B),child: Column(
children: <Widget>[
// SizedBox(height: 32.0),Expanded(
flex: 1,child: petHeader,Expanded(
flex: 11,child: Padding(
padding: const EdgeInsets.all(4.0),child: body,// lorem,);
return Scaffold(
body: mainBody,//_isShowingDialog ? bodyWithDialog : bodyWithCharts
);
}
}
解决方法
您是说拨动开关的激活未更改吗?
如果那样的话,很抱歉我误解了您的问题。
我确认通过单击可以更改拨动开关的激活状态。
由于每当执行build()时,切换开关的'initialLabelIndex'为0,因此没有激活更改。
这是一个转变点。 p>
initialLabelIndex: _swapNutrients ? 0 : 1,
import 'package:flutter/material.dart';
import 'package:toggle_switch/toggle_switch.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',theme: ThemeData(
primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,),home: MyHomePage(title: 'Flutter Demo Home Page'),);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key,this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _swapNutrients = false;
@override
void initState() {
super.initState();
}
Widget build(BuildContext context) {
final petHeader = Container(
alignment: Alignment.center,color: Colors.white,width: MediaQuery.of(context).size.width,child: Row(
children: [
Expanded(
flex: 2,child: Hero(
tag: 'hero',child: Padding(
padding: EdgeInsets.all(4.0),child: Container(),Expanded(
flex: 3,child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.start,mainAxisSize: MainAxisSize.min,children: [
Text(
'Dog Name',style: TextStyle(fontSize: 20.0,color: Colors.black87),Text(
'Age',style: TextStyle(fontSize: 12.0,],Expanded(
flex: 5,child: Container(
margin: EdgeInsets.symmetric(
horizontal: 12.0,child: Text(
'Daily Guide',style: TextStyle(fontSize: 32.0,textAlign: TextAlign.end,);
final macroCharts = Center(
child: Text('macro chart here'),);
final microCharts = Center(
child: Text('micro chart here'),);
Widget getMacroChart() {
return Center(
child: Text('macro chart here'),);
}
Widget getMicroChart() {
return Center(
child: Text('micro chart here'),);
}
final userSaveBtn = Container(
margin: EdgeInsets.only(top: 2.0,bottom: 4.0),alignment: Alignment.center,// width: MediaQuery.of(context).size.width,child: ToggleSwitch(
cornerRadius: 4.0,minWidth: MediaQuery.of(context).size.width,minHeight: MediaQuery.of(context).size.height,fontSize: 20.0,initialLabelIndex: _swapNutrients ? 0 : 1,activeBgColor: Color(0xFF03B898),activeFgColor: Colors.white,inactiveBgColor: Colors.grey[300],inactiveFgColor: Colors.black54,labels: [' Macro\nNutrients',' Micro\nNutrients'],onToggle: (index) {
print('switched to: $index');
print('switched to: $_swapNutrients');
setState(() {
_swapNutrients = !_swapNutrients;
});
},);
var swapTile = new Container(
child: _swapNutrients ? macroCharts : microCharts,);
final body = Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,crossAxisAlignment: CrossAxisAlignment.center,children: [
Expanded(
flex: 3,child: Container(
width: MediaQuery.of(context).size.width,color: Colors.transparent,child: Card(
child: Padding(
padding: EdgeInsets.all(4.0),child: Text(
'Welcome Alucard',style: TextStyle(fontSize: 28.0,Expanded(
flex: 6,child: Card(
color: Colors.white,child: Padding(
padding: const EdgeInsets.only(top: 8.0),child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,children: [
Expanded(
flex: 1,child: userSaveBtn,Expanded(
flex: 7,child: Container(
width: MediaQuery.of(context).size.width,child: swapTile,//getCustomContainer(),);
final lorem = Padding(
padding: EdgeInsets.all(8.0),child: Text(
'Lorem ipsum dolor sit amet,consectetur adipiscing elit. Donec hendrerit condimentum mauris id tempor. Praesent eu commodo lacus. Praesent eget mi sed libero eleifend tempor. Sed at fringilla ipsum. Duis malesuada feugiat urna vitae convallis. Aliquam eu libero arcu.',style: TextStyle(fontSize: 16.0,color: Colors.white),);
final mainBody = Container(
margin: EdgeInsets.only(
top: 16.0,padding: EdgeInsets.only(
top: 12.0,decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,end: Alignment.bottomCenter,stops: [0.5,1.0],colors: [
Color(0xFF03B898),Color(0xFF01816B),child: Column(
children: <Widget>[
// SizedBox(height: 32.0),Expanded(
flex: 1,child: petHeader,Expanded(
flex: 11,child: Padding(
padding: const EdgeInsets.all(4.0),child: body,// lorem,);
return Scaffold(
body: mainBody,//_isShowingDialog ? bodyWithDialog : bodyWithCharts
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。