Flutter:如何设置PersistentFooterButtons背景?

yk9xbfzb  于 2023-08-07  发布在  Flutter
关注(0)|答案(3)|浏览(158)

有没有一种方法可以设置persistentFooterButtons属性的背景,从脚手架小部件,填充页脚的所有空间
我尝试使用容器并设置其颜色属性,但它只填充背景按钮高度。

默认


的数据

Package 容器


期望结果


sycxhyv7

sycxhyv71#

这是默认的硬编码填充。
如果你使用Flutter Inspector,你会看到:


的数据
如果您进入SDK Scaffold.dart(Ctrl+单击Scaffold小部件),您将看到该值是硬编码的:

SafeArea(
            top: false,
            child: IntrinsicHeight(
              child: Container(
                alignment: widget.persistentFooterAlignment,
                // -> Default padding here
                padding: const EdgeInsets.all(8), 
                child: OverflowBar(
                  spacing: 8,
                  overflowAlignment: OverflowBarAlignment.end,
                  children: widget.persistentFooterButtons!,
                ),
              ),
            ),
          ),

字符串
解决这种情况的另一种方法是在一个单独的文件中创建一个新的Scaffold小部件,并将源代码从Flutter的原始Scaffold复制到您的新类中,但要进行所需的修改(即将填充更改为padding: EdgeInsets.all(0))。

pokxtpni

pokxtpni2#

PersistedFooterButtonsScaffold共享backgroundColor。所以如果你改变了ScaffoldbackgroundColor,它会拾取它。如果你想让body有不同的背景颜色,你可以用ContainerColoredBox Package 它,并给予它一些不同的颜色(就像我在下面的例子中所做的那样)。

class Sample extends StatelessWidget {
  const Sample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const ColoredBox(
        // if you want your body to have different background color
        color: Colors.grey,
        child: Center(
          child: Text('test'),
        ),
      ),
      // this changes persistentFooterButtons background color
      backgroundColor: Colors.white,
      persistentFooterButtons: [
        ElevatedButton(
          onPressed: () {},
          child: const Icon(Icons.arrow_back_ios_new),
        ),
        ElevatedButton(
          onPressed: () {},
          child: const Icon(Icons.arrow_forward_ios_rounded),
        ),
        ElevatedButton(
          onPressed: () {},
          child: const Text('Termina'),
        )
      ],
    );
  }
}

字符串
测试结果:


的数据

xlpyo6sf

xlpyo6sf3#

我在回答我自己的问题,因为我找到了一种方法来实现我所需要的,但我不再使用persistentFooterButtons了,所以我认为这个特定的线程有更多的正确答案。
属性bottomNavigationBar没有硬编码填充,与persistentFooterButtons相反(如另一个答案中的MendelG所示)。
因此,我可以使用Container更改背景颜色,并自己添加填充(在容器内)以获得所需的结果:

Scaffold(
  // ...
  bottomNavigationBar: Container(
    color: Colors.white,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        children: [
          // ...
        ],
      ),
    ),
  ),
),

字符串

结果


的数据

相关问题