user-interface - 如何在Flutter中修整此面板的边缘？

Question

我正在使用https://pub.dev/packages/flutter_sliding_up_panel依赖项，并且想要舍入下面面板的边缘。
这是我正在使用的代码

 SlidingUpPanelWidget(
      child: Column(
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(35.0),
              topRight: Radius.circular(35.0),
            ),
            child: Container(
              color: Colors.red,
              alignment: Alignment.center,
              child: Row(
                children: <Widget>[
                  Icon(
                    Icons.menu,
                    size: 30,
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      left: 8.0,
                    ),
                  ),
                  Text(
                    'click or drag',
                  )
                ],
                mainAxisAlignment: MainAxisAlignment.center,
              ),
              height: 50.0,
            ),
          ),
          Divider(
            height: 0.5,
            color: Colors.grey,
          ),
          Flexible(
            child: Container(
              child: ListView.separated(
                controller: scrollController,
                physics: ClampingScrollPhysics(),
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('list item $index'),
                  );
                },
                separatorBuilder: (context, index) {
                  return Divider(
                    height: 0.5,
                  );
                },
                shrinkWrap: true,
                itemCount: 20,
              ),
              color: Colors.white,
            ),
          ),
        ],
        mainAxisSize: MainAxisSize.min,
      ),
      controlHeight: 50.0,
      anchor: 0.4,
      panelController: panelController,
    ),

这是折叠面板当前的外观:

我希望整个面板与红色容器一样圆滑。

Answer 1

你做不到该库在您提供的小部件周围有一个硬编码的Material小部件。

您唯一可以做的就是复制整个库并对其进行修改。这是一个小型图书馆，只有一个文件需要复制。

在库的第192行，您具有以下代码:

child: Material(
                key: _childKey,
                color: Theme.of(context).backgroundColor,
                elevation: widget.elevation,
                child: SizedBox(
                  height: MediaQuery.of(context).size.height,
                  child: widget.child,
                ),
              ),

像这样修改它:

child: Material(
                key: _childKey,
                color: Colors.transparent,
                shadowColor: Colors.transparent,
                elevation: widget.elevation,
                child: SizedBox(
                  height: MediaQuery.of(context).size.height,
                  child: widget.child,
                ),
              ),