按下按钮时具有动态高度的 BottomSheet (DraggableScrollableSheet)

Question

所以基本上我希望能够在按下 Button 时更改 DraggableScrollableSheet 的可见高度。就像一个箭头，允许用户升高和降低特定高度。

到目前为止我有以下代码：

return Scaffold(
  appBar: AppBar(),
  body: Stack(
    children: <Widget>[
      Placeholder(),
      DraggableScrollableSheet(
        minChildSize: .1,
        initialChildSize: .1,
        maxChildSize: .5,
        builder: (context, scrollController) {
          return Container(
            height: size.height / 2,
            decoration: BoxDecoration(
              color: Theme.of(context).primaryColor,
              borderRadius: BorderRadius.vertical(
                top: Radius.circular(20),
              ),
            ),
            child: SingleChildScrollView(
              controller: scrollController,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.arrow_upward),
                    onPressed: () {
                      print('THIS IS WHERE I WANT TO OPEN THE SHEET');
                    },
                  ),
                  Container(
                    height: size.height / 2.75,
                    child: PageView(
                      controller: _pageController,
                      onPageChanged: (int page) {
                        setState(() {
                          currentIndex = page;
                        });
                      },
                      children: <Widget>[
                        Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[Text('Page 1')]),
                        Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[Text('Page 2')]),
                        Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[Text('Page 3')]),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    ],
  ),
);

我试过 scrollController.jumpTo() 和 scrollController.animateTo() 但他们所做的只是移动 IconButton 而不是 DraggableScrollableSheet。

                  IconButton(
                    icon: Icon(Icons.arrow_upward),
                    onPressed: () {
                      scrollController.jumpTo(20);
                      scrollController.animateTo(20, duration: null, curve: null);
                    },
                  ),

Answer 1

我无法有效地实现按下按钮并打开 DraggableScrollableSheet 的主要目标，但是由于 NotificationListener，当 sheet 被完全向上拖动时，我设法改变了箭头图标的状态，这是方法我做到了：

NotificationListener<DraggableScrollableNotification>(
        onNotification: (notification) {
          if (notification.extent > 0.48) {
            dragUpDown = false;
          } else {
            dragUpDown = true;
          }
          return true;
        },
        child: DraggableScrollableSheet(
          minChildSize: .1,
          initialChildSize: .1,
          maxChildSize: .5,
          builder: (context, scrollController) {
            return Container(
              height: size.height / 2,
              decoration: BoxDecoration(
                color: Theme.of(context).primaryColor,
                borderRadius: BorderRadius.vertical(
                  top: Radius.circular(20),
                ),
              ),
              child: SingleChildScrollView(
                controller: scrollController,
                child: Column(...

按下按钮时具有动态高度的 BottomSheet (DraggableScrollableSheet)

BottomSheet (DraggableScrollableSheet) with dynamic height when button is pressed

scroll

flutter

flutter-layout

flutter-pageview

singlechildscrollview