如何在用户点击按钮时构建向上滑动面板

Question

我想在单击 TextButton 时打开一个面板（来自 sliding_up_panel 包）。面板应该是隐藏的，只有在我点击按钮后才可见。

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")),
      ],
    );
  }
}

MyHomePage.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,
          );
        },
      ),
    );
  }
}

Answer 1

要制作SlidingUpPanel，您最初需要提供

        defaultPanelState: PanelState.CLOSED,
        minHeight: 0,

打开使用panelController.open();.

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

如何在用户点击按钮时构建向上滑动面板

How to build a Sliding Up Panel when User taps on button

dart

flutter

flutter-layout