如何删除颤动中的 persistedFooterButtons 的顶部边框

Question

我正在使用 permanentFooterButtons，我想删除它的顶部边框。有人知道怎么做吗？

我的代码：

 persistentFooterButtons: [
        Center(
          child: TextButton(
            style: ButtonStyle(
              
            ),
              onPressed: () {
                print("press the filter btn");
              },
              child: Text("Filter")),
        )
      ],

Answer 1

你可以这样做：

Theme(
  data: Theme.of(context).copyWith(
    dividerColor: Colors.transparent,
  ),
  child: Scaffold(
    body: Text("Body"),
    persistentFooterButtons: [
      Center(
        child: TextButton(
          style: ButtonStyle(),
          onPressed: () {
            print("press the filter btn");
          },
          child: Text("Filter"),
        ),
      ),
    ],
  ),
);

dividerColor: Colors.transparent,将分隔线/顶部边框设置为透明

Answer 2

这是因为Border实际上是针对这种情况进行硬编码的。查看源码Scaffold，我们可以看到它是如何实现的：

if (widget.persistentFooterButtons != null) {
  _addIfNonNull(
    children,
    Container(
      /// Here is the non-conditional [Border] being set for the top side
      decoration: BoxDecoration(
        border: Border(
          top: Divider.createBorderSide(context, width: 1.0),
        ),
      ),
      child: SafeArea(
        top: false,
        child: ButtonBar(
          children: widget.persistentFooterButtons!,
        ),
      ),
    ),
    ...

但正如您所看到的，这些按钮的实现非常简单。Scaffold作为一个简单的修复，您可以用 a包装您的内容Stack并使用相同的实现来实现相同的更多自定义（第一步没有Border）

像这样的东西（可能需要调整才能按照您想要的方式工作）：

Scaffold(
  body: Stack(
    alignment: Alignment.bottomCenter,
    children: [
      /// Your usual body part of the [Scaffold]
      ...
      /// Now here your own version of the bottom buttons just as the original implementation in [Scaffold]
      SafeArea(
        top: false,
        child: ButtonBar(
          children: [
            /// Place buttons or whatever you want here
            ...
          ],
        ),
      ),
      
    ],
  ),
);