如何使按钮返回到其初始状态

Question

我创建了一个自定义按钮，第一次点击时它会展开，第二次点击时，它会转到另一个屏幕。现在，问题是，我创建了该按钮的三个实例。因此，我首先点击的按钮保持展开状态，不会恢复到初始大小。每当用户点击任何其他小部件时，我想让按钮返回到其初始状态。对不起我的代码。我还在练习。希望有人帮忙。

这是自定义按钮的代码。

import 'package:flutter/material.dart';
double prevHeight = 0;
class CustomRetractableButton extends StatefulWidget {
double height;
double width;
String imagePath;
Color color;
CustomRetractableButton({
required this.height,
required this.width,
required this.color,
required this.imagePath,
}) {
prevHeight = height;
}
@override
_CustomRetractableButtonState createState() =>
_CustomRetractableButtonState();
}
class _CustomRetractableButtonState extends State<CustomRetractableButton>
with TickerProviderStateMixin {
String btnText = '';
Alignment imageAlignment = Alignment.center;
bool isSelected = false;
@override
Widget build(BuildContext context) {
double size = MediaQuery.of(context).size.height;
return AnimatedContainer(
duration: Duration(milliseconds: 150),
decoration: BoxDecoration(
color: widget.color,
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage(widget.imagePath),
alignment: imageAlignment,
fit: BoxFit.fitWidth,
),
),
height: widget.height,
child: TextButton(
onPressed: () {
if (!isSelected) {
isSelected = !isSelected;
setState(() {
widget.height = size;
btnText = 'Send Alert';
imageAlignment = Alignment.topCenter;
});
} else {
//navigates to another screen
}
},
child: Align(
alignment: Alignment.bottomCenter,
child: RotatedBox(
quarterTurns: -1,
child: AnimatedSize(
curve: Curves.easeInOut,
duration: const Duration(milliseconds: 150),
child: Padding(
padding: const EdgeInsets.only(left: 100),
child: Text(
btnText,
style: const TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
),
),
),
),
);
}
}

这是main.dart 的代码

import 'package:custom_animated_button/custom_retractable_button.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
double height = 250;
String btnText = '';
bool isSelected = true;
Alignment imageAlignment = Alignment.center;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(
flex: 1,
child: Column(
children: [
Container(
width: double.infinity,
child: const Text(
"Request Assistance",
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20,
),
),
),
Container(
width: double.infinity,
child: const Text(
"Please choose the type of responder",
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 14,
),
),
),
],
),
),
Expanded(
flex: 10,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: CustomRetractableButton(
height: 250,
width: double.infinity,
imagePath: 'assets/police3.png',
color: const Color(0xFF4F70A1),
),
),
const SizedBox(
width: 15,
),
Expanded(
child: CustomRetractableButton(
height: 250,
width: double.infinity,
imagePath: 'assets/medic.png',
color: const Color(0xFF81C6D6),
),
),
const SizedBox(
width: 15,
),
Expanded(
child: CustomRetractableButton(
height: 250,
width: double.infinity,
color: const Color(0xFFE05A45),
imagePath: 'assets/firefighter.png',
),
),
],
),
),
],
),
),
),
),
);
}
}

Answer 1

您想要：

允许CCD_ 1在按下项目时返回到初始状态。

您需要：

• 保存CustomRetractableButton的初始设置
• 公开更改并恢复状态

TODO:

• 使CustomRetractableButton的所有属性(height，width，imagePath(为最终属性
• 在_CustomRetractableButtonState下创建一个activeHeight属性
• 删除全局变量prevHeight，它将无法在多个实例上工作
• 创建一个类型为_CustomRetractableButtonState的静态变量，该变量将保存最后一个活动CustomRetractableButton0的状态

自定义按钮的完整代码

import 'package:flutter/material.dart';

class CustomRetractableButton extends StatefulWidget {
final double initialHeight;
final double width;
final String imagePath;
final Color color;
CustomRetractableButton({
required double height,
required this.width,
required this.color,
required this.imagePath,
}):initialHeight = height;
@override
_CustomRetractableButtonState createState() =>
_CustomRetractableButtonState();
}
class _CustomRetractableButtonState extends State<CustomRetractableButton>
with TickerProviderStateMixin {
static _CustomRetractableButtonState? oldActive; 
String btnText = '';
Alignment imageAlignment = Alignment.center;
bool isSelected = false;
double activeHeight = 0;

@override
initState(){
activeHeight = widget.initialHeight;
super.initState();
}
revert(){
if(mounted){
setState((){
activeHeight = widget.initialHeight;
isSelected = false;
});
}
}
@override
Widget build(BuildContext context) {
double size = MediaQuery.of(context).size.height;
return AnimatedContainer(
duration: Duration(milliseconds: 150),
decoration: BoxDecoration(
color: widget.color,
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage(widget.imagePath),
alignment: imageAlignment,
fit: BoxFit.fitWidth,
),
),
height: activeHeight,
child: TextButton(
onPressed: () {
if (!isSelected) {
if(oldActive != null){
oldActive!.revert();
}
isSelected = true;
oldActive = this;
setState(() {
activeHeight = size;
btnText = 'Send Alert';
imageAlignment = Alignment.topCenter;
});
} else {

if(oldActive != null){
oldActive!.revert();
oldActive = null;
}
//navigates to another screen
}
},
child: Align(
alignment: Alignment.bottomCenter,
child: RotatedBox(
quarterTurns: -1,
child: AnimatedSize(
vsync: this,
curve: Curves.easeInOut,
duration: const Duration(milliseconds: 150),
child: Padding(
padding: const EdgeInsets.only(left: 100),
child: Text(
btnText,
style: const TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
),
),
),
),
);
}
}

然后，您可以使用提供者或其他颤振状态管理方法来改进代码

Answer 2

用手势检测器包裹脚手架的整个主体，并在点击方法上进行操作。并将CCD_ 11添加到手势检测器。