Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/user-interface/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
User interface 如何在颤振中称为向上滑动面板?_User Interface_Flutter_Dart - Fatal编程技术网

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这是滑动面板后面的小部件”),
),
边界半径:半径,
),
),
],
),
);
}
}

效果很好,谢谢!只是想知道是否有办法为新面板的关闭和打开添加动画?