如何在 flutter 中删除 persistedFooterButtons 的顶部边框

Question

我正在使用 permanentFooterButtons，我想删除其顶部边框。 有谁知道怎么办吗？

我的代码：

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

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,

将分隔线/顶部边框设置为透明

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

包装

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

Answer 3

如果上述解决方案不起作用，请使用替代解决方案： 用本地主题小部件包裹您的脚手架并更改

DividerThemeData

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