如何在Flutter中移除persistentFooterButtons的顶部边框

Question

我正在使用 persistentFooterButtons，想要去掉它的顶部边框。

有人知道怎么做吗？

我的代码：

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

- ninoorta

Answer 1

你可以像这样做：

Theme(
  data: ThemeData().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,设置分隔线/顶部边框为透明

- Eric Aig

Answer 2

如果上述解决方案不起作用，可以尝试另一种解决方案： 将您的 Scaffold 包装在本地的 Theme 小部件中，并更改 DividerThemeData。

  Theme(
    data: Theme.of(context).copyWith(
      dividerTheme: const DividerThemeData(
        color: Colors.transparent,
      ),
    ),
    child: Scaffold(.....

- Suat Özkaya

Answer 3

这是因为在这种情况下，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!,
        ),
      ),
    ),
    ...

但是正如你所看到的，这些按钮的实现非常直接。作为一个简单的解决方法，你可以用一个Stack包装你的Scaffold内容，并使用相同的实现来实现更加自定义的效果（第一步没有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
            ...
          ],
        ),
      ),
      
    ],
  ),
);

- kounex

---

谢谢分享。 但它还不能满足我的需求。 我希望它可以持久存在，并且用户可以在第一次打开时轻松点击。 - ninoorta