Flutter DrawerHeader //如何去除分隔器

zrfyljdw 于 2023-03-04 发布在 Flutter

关注(0)|答案(4)|浏览(131)

我第一次设计抽屉，抽屉头显然带有一条灰色的线作为分隔线，我想摆脱，但我不知道如何摆脱。

此处为代码（为便于阅读而编辑），屏幕截图如下：

return SizedBox(
  width: 316.w,
  child: Drawer(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          height: 152.5,
          child: DrawerHeader(
            padding: EdgeInsets.fromLTRB(0, 74.h, 0, 0),
            child: Column(
              children: [
                Center(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      SizedBox(
                        width: 67.w,
                      ),
                      GestureDetector(
                        onTap: () {
                          toggleDevMode();
                        }, //selectPage(4),
                        child: Text(
                          'LOGO',
                          style: Provider.of<CustomTextStyle>(context)
                              .customTextStyle('Headline 3'),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
        //
        SizedBox(height: 42.5.h),
        //
        navIcon(
            labelText: 'HOME',
            icon: Icon(Icons.home, size: 50.r),
            index: 0),
        //
        SizedBox(height: 30.h),
        //favorites
        navIcon(
            labelText: 'FAVORITES',
            icon: Icon(Icons.favorite, size: 50.r),
            index: 1),
        //
        SizedBox(height: 30.h),
        //lookback
        navIcon(
            labelText: 'LOOKBACK',
            icon: Icon(Icons.bar_chart, size: 50.r),
            index: 2),
        //
        SizedBox(height: 30.h),
        //info & support
        navIcon(
            labelText: 'INFO & SUPPORT',
            icon: Icon(Icons.info, size: 50.r),
            index: 3),
      ],
    ),
  ),
);

我无法通过谷歌找到解决方案;也许你们中的一个知道更多？而且，真的没有太多要说的。有一条灰线。如何摆脱它？但算法不让我张贴，直到我写更多的文字有关的代码。对不起，让你读它。

flutter

来源：https://stackoverflow.com/questions/71531281/flutter-drawerheader-how-to-get-rid-of-divider

4条答案

按热度按时间

biswetbf1#

您可以使用装饰轻松地修改它。请参阅示例：

DrawerHeader(
        decoration: BoxDecoration(
          border: Border(
            bottom: Divider.createBorderSide(context,
                color: Colors.red, width: 2.0),
          ),
        ),
        child: Text('Hello World'),
      )

赞(0）回复(0）举报 2023-03-04

jtw3ybtb2#

有一个名为dividerColor的Theme属性，将其分配给Drawer（下面代码中的示例），然后在Material主题数据中更改它。

DrawerHeader(
        padding: const EdgeInsets.fromLTRB(0, 74, 0, 0),
        decoration: BoxDecoration(
          color: const Color(0xFF303030),
          border: Border(bottom: BorderSide(color: Theme.of(context).dividerColor)) // <--- use the global theme to change the dividerColor property 
        ),
        child: Column(
          children: [
            Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  const SizedBox(
                    width: 67,
                  ),
                  GestureDetector(
                    onTap: () {
//                       toggleDevMode();
                    }, //selectPage(4),
                    child: const Text(
                      'LOGO',
                      style: TextStyle( color: Colors.green )
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

下面介绍如何更改dividerColor属性值：

MaterialApp(
        theme: ThemeData(
          dividerColor: Color(0xFF303030) // change it with the background color
        ),
      ),

赞(0）回复(0）举报 2023-03-04

pgpifvop3#

我建议你把这个小部件完全去掉。毕竟，如果你不想要分隔符，那么使用它是没有意义的。使用填充小部件代替（如果你想保留填充）。

赞(0）回复(0）举报 2023-03-04

cnwbcb6i4#

在尝试了所有的解决方案后，我决定使用Container与height: 200而不是DrawerHeader，它起作用了：））

Container(
          height: 200,
          padding: const EdgeInsets.only(top: 25),
          child: Center(
            child: Column(
              children: [
                // content of header
              ],
            ),
          ),
        ),

赞(0）回复(0）举报 2023-03-04

我来回答

Flutter DrawerHeader //如何去除分隔器

4条答案

相关问题

热门标签

最新问答