如何在颤动中自定义切换按钮[关闭]
Posted
技术标签:
【中文标题】如何在颤动中自定义切换按钮[关闭]【英文标题】：How to customize the switch button in a flutter [closed] 【发布时间】：2020-02-16 04:44:54 【问题描述】：在我的应用程序中，我希望开关用于在开/关之间切换设置，分别为真/假。当我去构建它时，结果发现flutter提供了一个默认开关，但这不是我想要的，我想根据我的UI对其进行自定义
这是颤振开关按钮：-
这是我想要的：-
我怎样才能使我的 UI 成为可能？
【问题讨论】：
试试这个：medium.com/@felixblaschke/… 请展示一些研究成果！到目前为止，您尝试过什么？ 你可以在这里观看本教程：youtube.com/watch?v=TYNbMnaEnmA 只使用 CupertinoSwitch 而不是 Switch 【参考方案1】：您可以使用包 https://pub.dev/packages/custom_switch 或 fork 并修改为您的
完整代码
import 'package:custom_switch/custom_switch.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.deepOrange
),
home: HomeScreen(),
);
class HomeScreen extends StatefulWidget
@override
_HomeScreenState createState() => _HomeScreenState();
class _HomeScreenState extends State<HomeScreen>
bool status = false;
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text('Custom Switch Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CustomSwitch(
activeColor: Colors.pinkAccent,
value: status,
onChanged: (value)
print("VALUE : $value");
setState(()
status = value;
);
,
),
SizedBox(height: 12.0,),
Text('Value : $status', style: TextStyle(
color: Colors.black,
fontSize: 20.0
),)
],
),
),
);
【讨论】：
如何删除 On 和 Off 标签？ @AndreiMarin 评论“价值：状态”。 谢谢！ @NaveenNirbanYadav【参考方案2】：创建自定义开关类
class CustomSwitch extends StatefulWidget
final bool value;
final ValueChanged<bool> onChanged;
CustomSwitch(
Key key,
this.value,
this.onChanged)
: super(key: key);
@override
_CustomSwitchState createState() => _CustomSwitchState();
class _CustomSwitchState extends State<CustomSwitch>
with SingleTickerProviderStateMixin
Animation _circleAnimation;
AnimationController _animationController;
@override
void initState()
super.initState();
_animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 60));
_circleAnimation = AlignmentTween(
begin: widget.value ? Alignment.centerRight : Alignment.centerLeft,
end: widget.value ? Alignment.centerLeft :Alignment.centerRight).animate(CurvedAnimation(
parent: _animationController, curve: Curves.linear));
@override
Widget build(BuildContext context)
return AnimatedBuilder(
animation: _animationController,
builder: (context, child)
return GestureDetector(
onTap: ()
if (_animationController.isCompleted)
_animationController.reverse();
else
_animationController.forward();
widget.value == false
? widget.onChanged(true)
: widget.onChanged(false);
,
child: Container(
width: 45.0,
height: 28.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24.0),
color: _circleAnimation.value ==
Alignment.centerLeft
? Colors.grey
: Colors.blue,),
child: Padding(
padding: const EdgeInsets.only(
top: 2.0, bottom: 2.0, right: 2.0, left: 2.0),
child: Container(
alignment: widget.value
? Alignment.centerRight
: Alignment.centerLeft,
child: Container(
width: 20.0,
height: 20.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white),
),
),
),
),
);
,
);
将该类调用为widget，并使用value参数设置开关的状态
_enable = false;
CustomSwitch(
value: _enable,
onChanged: (bool val)
setState(()
_enabled = val;
);
,
),
【讨论】：
它无法正常工作。更改开关时总是给出错误值。首先，您应该对其进行测试。 这里的动画看起来不像动画。_circleAnimation.value == Alignment.centerLeft ? AppColors.grey2 : AppColors.primary4 一点意义都没有。
它有效，但您必须将小圆圈对齐编辑为alignment:_circleAnimation.value,【参考方案3】：
你可以使用this packages实现这样的设计：
这个用法来自他们的自述文件
import 'package:custom_switch_button/custom_switch_button.dart';
bool isChecked = false;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Custom Switch Button example app'),
),
body: GestureDetector(
onTap: ()
setState(()
isChecked = !isChecked;
);
,
child: Center(
child: CustomSwitchButton(
backgroundColor: Colors.blueGrey,
unCheckedColor: Colors.white,
animationDuration: Duration(milliseconds: 400),
checkedColor: Colors.lightGreen,
checked: isChecked,
),
),
),
),
);
最终结果：
【讨论】：
【参考方案4】：设置
bool _switchValue=true;
在你的 screen.dart 中
CupertinoSwitch(
value: _switchValue,
onChanged: (value)
setState(()
_switchValue = value;
);
,
),
【讨论】：
请解释您的解决方案为何以及如何工作。也许添加参考或链接文档，并请正确格式化您的帖子。但是，我不确定您的答案是否能解决 OP 问题。他问的是设计，而不是价值转换。 他们想要像 ios 上的 switchbutton 和 CupertinoSwitch 这样的设计来解决他们想要的问题，我设置了“bool _switchValue=true;”只知道 var 包含 switchbutton 的状态 如何让圆形按钮比条带大？ 使用 Switch 小部件，CupertinoSwitch 使用的是 ios 设备的开关，但如果你想要普通的开关，请使用 Matrial 设计的开关【参考方案5】：用于自定义开关。我用了这个包。 https://pub.dev/packages/flutter_switch
您可以自定义开关的高度和宽度、开关的边框半径、颜色、切换大小等。
安装：
dependencies:
flutter_switch: ^0.0.2
进口：
import 'package:flutter_switch/flutter_switch.dart';
示例用法：
FlutterSwitch(
height: 20.0,
width: 40.0,
padding: 4.0,
toggleSize: 15.0,
borderRadius: 10.0,
activeColor: lets_cyan,
value: isToggled,
onToggle: (value)
setState(()
isToggled = value;
);
,
),
【讨论】：
嗨，Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline. 尼克，你（和其他人）贡献了一些有用的东西很好，但是你应该仔细测试它。当我通过 setState 更改值时，Widget 不会更新。以 CupertinoSwitch 为例。谢谢以上是关于如何在颤动中自定义切换按钮[关闭]的主要内容，如果未能解决你的问题，请参考以下文章