<分区>
我是 flutter 的新手,我需要自定义一个切换按钮,如下所示,任何人都可以帮我解决这个问题,我使用了堆栈并定位了两个重叠的按钮,但是当它们改变移动显示时,所以任何一个请帮我解决这个问题。 Image
<分区>
我是 flutter 的新手,我需要自定义一个切换按钮,如下所示,任何人都可以帮我解决这个问题,我使用了堆栈并定位了两个重叠的按钮,但是当它们改变移动显示时,所以任何一个请帮我解决这个问题。 Image
最佳答案
希望对你有帮助:
import 'package:flutter/material.dart';
class ToggleButton extends StatefulWidget {
@override
_ToggleButtonState createState() => _ToggleButtonState();
}
const double width = 300.0;
const double height = 60.0;
const double loginAlign = -1;
const double signInAlign = 1;
const Color selectedColor = Colors.white;
const Color normalColor = Colors.black54;
class _ToggleButtonState extends State<ToggleButton> {
double xAlign;
Color loginColor;
Color signInColor;
@override
void initState() {
super.initState();
xAlign = loginAlign;
loginColor = selectedColor;
signInColor = normalColor;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo'),
),
body: Center(
child: Container(
width: width,
height: height,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(
Radius.circular(50.0),
),
),
child: Stack(
children: [
AnimatedAlign(
alignment: Alignment(xAlign, 0),
duration: Duration(milliseconds: 300),
child: Container(
width: width * 0.5,
height: height,
decoration: BoxDecoration(
color: Colors.lightGreen,
borderRadius: BorderRadius.all(
Radius.circular(50.0),
),
),
),
),
GestureDetector(
onTap: () {
setState(() {
xAlign = loginAlign;
loginColor = selectedColor;
signInColor = normalColor;
});
},
child: Align(
alignment: Alignment(-1, 0),
child: Container(
width: width * 0.5,
color: Colors.transparent,
alignment: Alignment.center,
child: Text(
'Login',
style: TextStyle(
color: loginColor,
fontWeight: FontWeight.bold,
),
),
),
),
),
GestureDetector(
onTap: () {
setState(() {
xAlign = signInAlign;
signInColor = selectedColor;
loginColor = normalColor;
});
},
child: Align(
alignment: Alignment(1, 0),
child: Container(
width: width * 0.5,
color: Colors.transparent,
alignment: Alignment.center,
child: Text(
'Signin',
style: TextStyle(
color: signInColor,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
),
),
);
}
}
关于flutter - 如何在 flutter 中自定义切换按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64314926/
相关文章:
error-handling - 为什么我不能在 flutter 上打印出图像?
android - 如何从 dart/flutter 将 int/integer 值作为 json 发布
dart - 在 ListView 中滚动时项目状态发生变化
flutter - 如何将焦点转移到 Flutter 中的下一个 TextField?
javascript - 没有 Action 的 JQuery Flip 切换刷新
flutter - AlertDialog 没有被调用 onPressed