dart 如何建立一个滑动面板时,用户点击按钮

vxbzzdmp  于 2023-04-27  发布在  其他
关注(0)|答案(2)|浏览(83)

当我点击一个TextButton时,我想打开一个面板(来自sliding_up_panel包)。面板应该是隐藏的,只有在我点击按钮后才能看到。

  • 面板. dart *
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

class Panel extends StatelessWidget {
  final ScrollController controller;
  final PanelController panelController;

  const Panel(
      {Key? key, required this.controller, required this.panelController})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return ListView(
      physics: const BouncingScrollPhysics(),
      padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
      controller: controller,
      children: const <Widget>[
        SizedBox(height: 32),
        Center(child: Text("PANEL")),
      ],
    );
  }
}
  • 我的主页.dart*
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final panelController = PanelController();
  final controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    final panelHeightOpen = MediaQuery.of(context).size.height * 0.7;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SlidingUpPanel(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'Click Here to Build a New Panel',
              ),
              TextButton(
                onPressed: () {
                  //TODO: Build new Panel
                },
                child: const Text("Click"),
              ),
            ],
          ),
        ),
        controller: panelController,
        maxHeight: panelHeightOpen,
        defaultPanelState: PanelState.CLOSED,
        minHeight: 120,
        borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
        backdropTapClosesPanel: true,
        //panel: ,
        panelBuilder: (controller) {
          return Panel(
            controller: controller,
            panelController: panelController,
          );
        },
      ),
    );
  }
}
t3psigkw

t3psigkw1#

要初始化SlidingUpPanel,您需要提供

defaultPanelState: PanelState.CLOSED,
        minHeight: 0,

使用panelController.open();打开。

TextButton(
  onPressed: () {
    panelController.open();
  },
  child: const Text("Click"),
),
mpgws1up

mpgws1up2#

我最终复制了SlidingUpPanel代码,并将_isPanelVisible字段设置为false而不是true作为默认值。也可以调整代码,以便能够使用构造函数设置该字段(但出于我的需要,我总是希望它在开始时不可见)

相关问题