如何在Flutter中创建垂直滚动菜单效果 [英] How to create a vertical scrolling menu effect in Flutter
本文介绍了如何在Flutter中创建垂直滚动菜单效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
此问题是对
这是更新的代码:
import'package:flutter/material.dart';最后的颜色darkBlue = Color.fromARGB(255，18，32，47);void main(){runApp(MyApp());}MyApp类扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回MaterialApp(主题:ThemeData.dark().copyWith(scaffoldBackgroundColor:darkBlue)，debugShowCheckedModeBanner:否，家:脚手架(身体:中心(子代:MyWidget()，)，)，);}}类MyWidget扩展了StatefulWidget {@override_MyWidgetState createState()=>_MyWidgetState();}类_MyWidgetState扩展了State< MyWidget>与SingleTickerProviderStateMixin {最终颜色=< Color> [Colors.indigo，Colors.blue，Colors.orange，Colors.red]；double _size = 250.0;bool _large = true;无效_updateSize(){setState((){_size = _large?250.0:0.0；_large =！_large;});}@override窗口小部件build(BuildContext context){返回脚手架(正文:行(孩子们: [AnimatedSize(曲线:Curves.easeIn，vsync:这个，持续时间:持续时间(秒:1)，子级:LeftDrawer(size:_size))，展开(弹性:4，子代:集装箱(子:列(孩子们: [容器(颜色:Colors.white，填充:const EdgeInsets.all(8)，子级:Row(孩子们: [IconButton(图标:Icon(Icons.menu，颜色:Colors.black87)，onPressed:(){_updateSize();}，)，FlatButton(子代:文字('仪表盘'，样式:const TextStyle(color:Colors.black87)，)，onPressed:(){}，)，FlatButton(子代:文字('用户'，样式:const TextStyle(color:Colors.black87)，)，onPressed:(){}，)，FlatButton(子代:文字(设置"，样式:const TextStyle(color:Colors.black87)，)，onPressed:(){}，)，const Spacer()，IconButton(图标:Icon(Icons.brightness_3，颜色:Colors.black87)，onPressed:(){}，)，IconButton(图标:Icon(Icons.notification_important，颜色:Colors.black87)，onPressed:(){}，)，CircleAvatar()，]，)，)，容器(高度:1颜色:Colors.black12，)，卡片(边距:EdgeInsets.zero，形状:RoundedRectangleBorder(borderRadius:BorderRadius.circular(0)，)，子代:集装箱(颜色:Colors.white，填充:const EdgeInsets.all(20)，子级:Row(孩子们: [文本(首页/管理员/仪表板"，样式:const TextStyle(颜色:Colors.black)，)，]，)，)，)，展开(子级:ListView(孩子们: [排(孩子们: [_container(0)，_container(1)，_container(2)，_container(3)，]，)，容器(高度:400，颜色:颜色(0xFFE7E7E7)，填充:const EdgeInsets.all(16)，子卡:颜色:Colors.white，子代:集装箱(填充:const EdgeInsets.all(16)，子代:文字('交通'，样式:const TextStyle(color:Colors.black87)，)，)，)，)，]，)，)，]，)，)，)，]，)，);}窗口小部件_container(int index){返回Expanded(子代:集装箱(填充:const EdgeInsets.all(20)，颜色:颜色(0xFFE7E7E7)，子卡:颜色:颜色(0xFFE7E7E7)，子代:集装箱(颜色:颜色[索引]，宽度:250，高度:140，填充:const EdgeInsets.all(20)，子:列(crossAxisAlignment:CrossAxisAlignment.start，孩子们: [排(孩子们: [展开(子代:文字('9.823'，样式:TextStyle(fontSize:24)，))，图标(Icons.more_vert)，]，)，文字(在线会员")]，)，)，)，)，);}}类LeftDrawer扩展了StatefulWidget {LeftDrawer({关键这个大小，}):super(key:key);最终双倍大小；@override_LeftDrawerState createState()=>_LeftDrawerState();}类_LeftDrawerState扩展了State< LeftDrawer>{bool dropdownVisible = false;@override窗口小部件build(BuildContext context){返回Expanded(弹性:1，子代:集装箱(宽度:widget.size，颜色:const Color(0xFF2C3C56)，子级:ListView(孩子们: [容器(对齐方式:Alignment.center，填充:const EdgeInsets.all(16)，颜色:颜色(0xFF223047)，子级:Text('CORE UI')，)，_tile('Dashboard')，容器(填充:const EdgeInsets.only(left:10)，保证金:const EdgeInsets.only(top:30)，子代:Text('THEME'，样式:TextStyle(颜色:Colors.white54，)))，_tile('Colors')，_tile('Typography')，_tileDropdown('Base')，_tile('Buttons')，]，)，)，);}小部件_tile(字符串标签){返回ListTile(标题:文字(标签)，onTap :(){}，);}小部件_option(字符串标签){返回ListTile(tileColor:颜色(0xFF223047)，contentPadding:const EdgeInsets.only(left:40)，标题:文字(标签)，onTap :(){}，);}窗口小部件_tileDropdown(字符串标签){返回列(mainAxisSize:MainAxisSize.min，孩子们: [ListTile(标题:文字(标签)，onTap:(){setState((){dropdownVisible =！dropdownVisible;});}，尾随:dropdownVisible?图标(Icons.arrow_drop_up):图标(Icons.chevron_left)，)，能见度(可见:下拉可见，子:_option('Breadcrumbs')，)，能见度(可见:下拉可见，子级:_option('Cloud')，)，能见度(可见:下拉可见，子:_option('Carousel')，)，能见度(可见:下拉可见，子级:_option('Collapse')，)，]，);}} this question is an improvement for this question. In this case, I would like to reproduce the vertical menu the you can see on the left side of this we base. If you click the link relative to the example on the left you see a number of menu. For instance, clicking on Base you are going to see a vertical menu appearing and disappearing. I would like to know how to reproduce it as well. An example code would be really appreciated.
Thanks all
解决方案
You can achieve this by simply using a StatefulWidget & managing the hide/show functionality using a boolean value.
Here is the updated code:
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget>
with SingleTickerProviderStateMixin {
final colors = <Color>[Colors.indigo, Colors.blue, Colors.orange, Colors.red];
double _size = 250.0;
bool _large = true;
void _updateSize() {
setState(() {
_size = _large ? 250.0 : 0.0;
_large = !_large;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
AnimatedSize(
curve: Curves.easeIn,
vsync: this,
duration: Duration(seconds: 1),
child: LeftDrawer(size: _size)),
Expanded(
flex: 4,
child: Container(
child: Column(
children: [
Container(
color: Colors.white,
padding: const EdgeInsets.all(8),
child: Row(
children: [
IconButton(
icon: Icon(Icons.menu, color: Colors.black87),
onPressed: () {
_updateSize();
},
),
FlatButton(
child: Text(
'Dashboard',
style: const TextStyle(color: Colors.black87),
),
onPressed: () {},
),
FlatButton(
child: Text(
'User',
style: const TextStyle(color: Colors.black87),
),
onPressed: () {},
),
FlatButton(
child: Text(
'Settings',
style: const TextStyle(color: Colors.black87),
),
onPressed: () {},
),
const Spacer(),
IconButton(
icon: Icon(Icons.brightness_3, color: Colors.black87),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.notification_important,
color: Colors.black87),
onPressed: () {},
),
CircleAvatar(),
],
),
),
Container(
height: 1,
color: Colors.black12,
),
Card(
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
color: Colors.white,
padding: const EdgeInsets.all(20),
child: Row(
children: [
Text(
'Home / Admin / Dashboard',
style: const TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: ListView(
children: [
Row(
children: [
_container(0),
_container(1),
_container(2),
_container(3),
],
),
Container(
height: 400,
color: Color(0xFFE7E7E7),
padding: const EdgeInsets.all(16),
child: Card(
color: Colors.white,
child: Container(
padding: const EdgeInsets.all(16),
child: Text(
'Traffic',
style: const TextStyle(color: Colors.black87),
),
),
),
),
],
),
),
],
),
),
),
],
),
);
}
Widget _container(int index) {
return Expanded(
child: Container(
padding: const EdgeInsets.all(20),
color: Color(0xFFE7E7E7),
child: Card(
color: Color(0xFFE7E7E7),
child: Container(
color: colors[index],
width: 250,
height: 140,
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(
'9.823',
style: TextStyle(fontSize: 24),
)),
Icon(Icons.more_vert),
],
),
Text('Members online')
],
),
),
),
),
);
}
}
class LeftDrawer extends StatefulWidget {
LeftDrawer({
Key key,
this.size,
}) : super(key: key);
final double size;
@override
_LeftDrawerState createState() => _LeftDrawerState();
}
class _LeftDrawerState extends State<LeftDrawer> {
bool dropdownVisible = false;
@override
Widget build(BuildContext context) {
return Expanded(
flex: 1,
child: Container(
width: widget.size,
color: const Color(0xFF2C3C56),
child: ListView(
children: [
Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(16),
color: Color(0xFF223047),
child: Text('CORE UI'),
),
_tile('Dashboard'),
Container(
padding: const EdgeInsets.only(left: 10),
margin: const EdgeInsets.only(top: 30),
child: Text('THEME',
style: TextStyle(
color: Colors.white54,
))),
_tile('Colors'),
_tile('Typography'),
_tileDropdown('Base'),
_tile('Buttons'),
],
),
),
);
}
Widget _tile(String label) {
return ListTile(
title: Text(label),
onTap: () {},
);
}
Widget _option(String label) {
return ListTile(
tileColor: Color(0xFF223047),
contentPadding: const EdgeInsets.only(left: 40),
title: Text(label),
onTap: () {},
);
}
Widget _tileDropdown(String label) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
title: Text(label),
onTap: () {
setState(() {
dropdownVisible = !dropdownVisible;
});
},
trailing: dropdownVisible
? Icon(Icons.arrow_drop_up)
: Icon(Icons.chevron_left),
),
Visibility(
visible: dropdownVisible,
child: _option('Breadcrumbs'),
),
Visibility(
visible: dropdownVisible,
child: _option('Cloud'),
),
Visibility(
visible: dropdownVisible,
child: _option('Carousel'),
),
Visibility(
visible: dropdownVisible,
child: _option('Collapse'),
),
],
);
}
}
这篇关于如何在Flutter中创建垂直滚动菜单效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
