User interface 如何在颤振中称为向上滑动面板?
我正在使用,我想在按下现有面板上的按钮后触发打开新面板User interface 如何在颤振中称为向上滑动面板?,user-interface,flutter,dart,User Interface,Flutter,Dart,我正在使用,我想在按下现有面板上的按钮后触发打开新面板 @override Widget build(BuildContext context) { BorderRadiusGeometry radius = BorderRadius.only( topLeft: Radius.circular(24.0), topRight: Radius.circular(24.0), ); return Scaffold
@override
Widget build(BuildContext context) {
BorderRadiusGeometry radius = BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
);
return Scaffold(
appBar: AppBar(
title: Text("SlidingUpPanelExample"),
),
body: SlidingUpPanel(
panel: Center(
child: RaisedButton(
child: Text('Show new panel'),
onPressed: () {
**///want to add code
here to trigger the callback of the new panel.**
},
),
),
collapsed: Container(
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: radius
),
child: Center(
child: Text(
"This is the collapsed Widget",
style: TextStyle(color: Colors.white),
),
),
),
body: Center(
child: Text("This is the Widget behind the sliding panel"),
),
borderRadius: radius,
),
);
}
这个依赖项能够在控制器的帮助下调用open()方法,但我不知道如何使用它调用新的向上滑动面板(显然是关闭现有面板)。
以下是open()操作的代码:
PanelController _pc = new PanelController();
...
RaisedButton(
child: Text("Open"),
onPressed: () => _pc.open(),
),
您可以复制粘贴运行下面的完整代码
您可以使用
列
并将这两个幻灯片面板
包装为可见性
,并将维护状态
,维护动画
设置为true工作演示显示在
slidengappanel
1和2之间切换代码片段
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Visibility(
maintainState: true,
maintainAnimation: true,
visible: _visible,
child: SlidingUpPanel(
controller: _pc1,
panel: Center(
child: RaisedButton(
child: Text('Show new panel 2'),
onPressed: () {
_pc1.close();
_visible = false;
setState(() {});
_pc2.open();
},
body:Column(
mainAxisAlignment:mainAxisAlignment.end,
儿童:[
可见度(
国家:是的,
对,,
可见:_可见,
孩子:滑梯(
控制器:_pc1,
面板:中间(
孩子:升起按钮(
子项:文本(“显示新面板2”),
已按下:(){
_pc1.close();
_可见=假;
setState((){});
_pc2.open();
},
工作演示
完整代码
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
PanelController _pc1 = new PanelController();
PanelController _pc2 = new PanelController();
bool _visible = true;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
BorderRadiusGeometry radius = BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Visibility(
maintainState: true,
maintainAnimation: true,
visible: _visible,
child: SlidingUpPanel(
controller: _pc1,
panel: Center(
child: RaisedButton(
child: Text('Show new panel 2'),
onPressed: () {
_pc1.close();
_visible = false;
setState(() {});
_pc2.open();
},
),
),
collapsed: Container(
decoration:
BoxDecoration(color: Colors.blueGrey, borderRadius: radius),
child: Center(
child: Text(
"Panel 1",
style: TextStyle(color: Colors.orange),
),
),
),
body: Center(
child: Text(
"Panel 1 This is the Widget behind the sliding panel")),
borderRadius: radius,
),
),
Visibility(
maintainState: true,
maintainAnimation: true,
visible: !_visible,
child: SlidingUpPanel(
controller: _pc2,
panel: Center(
child: RaisedButton(
child: Text('Show new panel 1'),
onPressed: () {
_pc2.close();
_visible = true;
setState(() {});
_pc1.open();
},
),
),
collapsed: Container(
decoration:
BoxDecoration(color: Colors.blueGrey, borderRadius: radius),
child: Center(
child: Text(
"Panel 2 ",
style: TextStyle(color: Colors.red),
),
),
),
body: Center(
child:
Text("Panel 2 This is the Widget behind the sliding panel"),
),
borderRadius: radius,
),
),
],
),
);
}
}
导入“包装:颤振/材料.省道”;
导入“包装:向上滑动面板/向上滑动面板.dart”;
void main(){
runApp(MyApp());
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回材料PP(
标题:“颤振演示”,
主题:主题数据(
主样本:颜色。蓝色,
视觉密度:视觉密度。自适应平台密度,
),
主页:MyHomePage(标题:“颤振演示主页”),
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage({Key,this.title}):超级(Key:Key);
最后的字符串标题;
@凌驾
_MyHomePageState createState()=>\u MyHomePageState();
}
类_MyHomePageState扩展状态{
int _计数器=0;
PanelController_pc1=新的PanelController();
PanelController_pc2=新的PanelController();
bool_visible=真;
void _incrementCounter(){
设置状态(){
_计数器++;
});
}
@凌驾
小部件构建(构建上下文){
BorderRadius几何体半径=BorderRadius.only(
左上:半径。圆形(24.0),
右上角:半径。圆形(24.0),
);
返回脚手架(
appBar:appBar(
标题:文本(widget.title),
),
正文:专栏(
mainAxisAlignment:mainAxisAlignment.end,
儿童:[
可见度(
国家:是的,
对,,
可见:_可见,
孩子:滑梯(
控制器:_pc1,
面板:中间(
孩子:升起按钮(
子项:文本(“显示新面板2”),
已按下:(){
_pc1.close();
_可见=假;
setState((){});
_pc2.open();
},
),
),
折叠:容器(
装饰:
盒子装饰(颜色:颜色。蓝灰色,边框半径:半径),
儿童:中心(
子:文本(
“第一小组”,
样式:TextStyle(颜色:Colors.orange),
),
),
),
正文:中(
子:文本(
“面板1这是滑动面板后面的小部件”),
边界半径:半径,
),
),
可见度(
国家:是的,
对,,
可见:!\u可见,
孩子:滑梯(
控制器:_pc2,
面板:中间(
孩子:升起按钮(
子项:文本(“显示新面板1”),
已按下:(){
_pc2.close();
_可见=真实;
setState((){});
_pc1.open();
},
),
),
折叠:容器(
装饰:
盒子装饰(颜色:颜色。蓝灰色,边框半径:半径),
儿童:中心(
子:文本(
“第2小组”,
样式:TextStyle(颜色:Colors.red),
),
),
),
正文:中(
儿童:
文本(“面板2这是滑动面板后面的小部件”),
),
边界半径:半径,
),
),
],
),
);
}
}
效果很好,谢谢!只是想知道是否有办法为新面板的关闭和打开添加动画?