切换开关动画在 Flutter 中不工作

6ie5vjzr  于 2023-01-18  发布在  Flutter
关注(0)|答案(1)|浏览(144)

'我尝试实现一个切换开关,当我切换开关时,我显示两个不同的东西,但当我使用setstate和我的逻辑或类似的东西时,我得到了一个错误。如果我从代码中删除setstate,动画再次开始工作,但逻辑不工作,当我在开关之间切换时,我没有得到两个不同的结果,代码是:

import 'package:flutter/material.dart';
import 'package:sadapay_clone/screens/homepage.dart';
import 'package:sadapay_clone/widgets/physical_card_item.dart';
import 'package:sadapay_clone/widgets/virtual_card_item.dart';
import 'package:toggle_switch/toggle_switch.dart';

class CardScreen extends StatefulWidget {
  const CardScreen({super.key});

  @override
  State<CardScreen> createState() => _CardScreenState();
}

class _CardScreenState extends State<CardScreen>{
  // AnimationController _controller;

  bool toggle = false;

  // @override
  // void initState() {
  //   _controller = AnimationController(vsync: this);
  //   super.initState();
  // }

  // void toggleSwitch(int index) {
  //   if (index == 0) {
  //     setState(() {
  //       toggle = true;
  //     });
  //   } else if (index == 1) {
  //     setState(() {
  //       toggle = false;
  //     });
  //   }
  // }
  void toggleSwitch(int index) {
    if (index == 0) {
      setState(() {
        toggle = true;
      });
    } else if (index == 1) {
      setState(() {
        toggle = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const SizedBox(height: 75),
          SizedBox(
            width: double.infinity,
            child: Row(
              // mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                IconButton(
                  onPressed: () {
                    Navigator.pop(
                      context,
                      MaterialPageRoute(
                        builder: (context) => const MyHomePage(),
                      ),
                    );
                  },
                  icon: const Icon(Icons.arrow_back_ios),
                ),
                Container(
                  width: 295,
                  alignment: Alignment.center,
                  child: const Text(
                    'My Cards',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w500,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          Container(
            alignment: Alignment.center,
            height: 40,
            width: 365,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.grey[300],
            ),
            child: ToggleSwitch(
              minHeight: 30,
              minWidth: 180.0,
              cornerRadius: 20.0,
              activeBgColors: const [
                [Colors.white],
                [Colors.white]
              ],
              activeFgColor: Colors.black,
              inactiveBgColor: Colors.grey[300],
              inactiveFgColor: Colors.black54,
              initialLabelIndex: 0,
              totalSwitches: 2,
              labels: const ['Virtual', 'Physical'],
              radiusStyle: true,
              onToggle: (index) {
                toggleSwitch(index!);
              },

              // onToggle: (index) {
              //   setState(() {
              //     toggle = index == 0;
              //   });
              // },
            ),
          ),
          toggle ? VirtualCard() : PhysicalCard(),
        ],
      ),
    );
  }
}

我试着在函数内部使用setstate逻辑,而不是在onchanged属性内部使用它,但是逻辑仍然工作,当我按下开关时,我看到两个不同的结果,但是动画不工作。

xqnpmsa8

xqnpmsa81#

问题是,当我们调用setState时,构建方法是trigger,并再次将initialLabelIndex设置为0,您可以在此处进行检查,

class _CardScreenState extends State<CardScreen> {
  bool toggle = false;

  void toggleSwitch(int index) {
    if (index == 0) {
      setState(() {
        toggle = true;
      });
    } else if (index == 1) {
      setState(() {
        toggle = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            alignment: Alignment.center,
            height: 40,
            width: 365,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.grey[300],
            ),
            child: ToggleSwitch(
              minHeight: 30,
              minWidth: 180.0,
              cornerRadius: 20.0,
              activeBgColors: const [
                [Colors.white],
                [Colors.white]
              ],
              activeFgColor: Colors.black,
              inactiveBgColor: Colors.grey[300],
              inactiveFgColor: Colors.black54,
              initialLabelIndex: toggle ? 0 : 1,
              totalSwitches: 2,
              labels: ['Virtual', 'Physical'],
              radiusStyle: true,
              onToggle: (index) {
                toggleSwitch(index!);
              },
            ),
          ),
          toggle ? Text("VirtualCard") : Text("PhysicalCard"),
        ],
      ),
    );
  }
}

相关问题