Flutter DrawerHeader // 如何摆脱分隔线

Question

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

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

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

我通过google找不到解决方案；也许你们中的一个人知道更多？另外，其实也没什么可说的了。有一条灰线。如何摆脱它？但算法不会让我发布，直到我写更多内容以获得更多与代码相关的文本。很抱歉让您阅读。

Answer 1

在尝试了所有解决方案后，我决定使用

Container

和

height: 200

而不是

DrawerHeader

并且它有效:)）

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

Answer 2

我建议您完全删除该小部件。毕竟，如果您不需要分隔线，那么拥有它就没有意义。使用 Padding 小部件（如果您想保留该填充）

Answer 3

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

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
        ),
      ),

Answer 4

我强烈不同意已接受的答案。要真正摆脱分隔符，您有两种选择。

1. 只需删除

   DrawerHeader

   小部件并构建您的即可。
2. 这也与选项一一致。如果你看一下

   DrawerHeader

   的代码，它并不复杂。

// This is the build method of the `DrawerHeader` widget.
...
 return Container(
      height: statusBarHeight + _kDrawerHeaderHeight,
      margin: margin,
      decoration: BoxDecoration(
        border: Border(
          bottom: Divider.createBorderSide(context),
        ),
      ),
      child: AnimatedContainer(
        padding: padding.add(EdgeInsets.only(top: statusBarHeight)),
        decoration: decoration,
        duration: duration,
        curve: curve,
        child: child == null ? null : DefaultTextStyle(
          style: theme.textTheme.bodyLarge!,
          child: MediaQuery.removePadding(
            context: context,
            removeTop: true,
            child: child!,
          ),
        ),
      ),
    );

分隔线的原因是Container装饰。您可以从字面上复制整个代码，创建您自己的小部件，将其命名为您想要的任何名称并删除边框。

这部分代码负责Divider

border: Border(
// This is what you don't want
  bottom: Divider.createBorderSide(context),
),

Answer 5

您可以使用装饰轻松修改它。看例子：

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

Answer 6

希望这段代码能够正常工作

 child: DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
              bottom: Divider.createBorderSide(context,
                  color: Colors.white, width: 0.0),
            ),
          ))

Answer 7

只需按 ctrl 进入 The DrawerHeader 的代码，然后单击 vscode 中的 DrawerHeader 小部件，然后更改容器的装饰

decoration: BoxDecoration(
        border: Border(
          bottom: Divider.createBorderSide(context),
        ),

到

decoration:null,