Sum*_*ane 12 customization dart flutter flutter-widget
在我的应用程序中,我希望开关用于在开/关之间切换设置,分别为真/假。当我去构建它时,结果发现flutter提供了一个默认开关,但这不是我想要的,我想根据我的UI对其进行自定义
这是颤振开关按钮:-
这是我想要的:-
我怎样才能让我的 UI 成为可能?
mak*_*ouf 23
放
bool _switchValue=true;
Run Code Online (Sandbox Code Playgroud)
在你的 screen.dart
CupertinoSwitch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
),
Run Code Online (Sandbox Code Playgroud)
chu*_*han 20
您可以使用包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
),)
],
),
),
);
}
}
Run Code Online (Sandbox Code Playgroud)
小智 12
创建自定义开关类
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),
),
),
),
),
);
},
);
}
}
Run Code Online (Sandbox Code Playgroud)
将这个类称为widget,并使用value参数来设置开关的状态
_enable = false;
CustomSwitch(
value: _enable,
onChanged: (bool val){
setState(() {
_enabled = val;
});
},
),
Run Code Online (Sandbox Code Playgroud)
对于自定义开关。我用过这个包。 https://pub.dev/packages/flutter_switch
您可以自定义开关的高度和宽度、开关的边框半径、颜色、切换大小等。
安装:
dependencies:
flutter_switch: ^0.0.2
Run Code Online (Sandbox Code Playgroud)
进口:
import 'package:flutter_switch/flutter_switch.dart';
Run Code Online (Sandbox Code Playgroud)
示例用法:
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;
});
},
),
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
49299 次 |
最近记录: |