颤振，材料，删除抽屉标题下的微弱线

Question

DrawerHeader 小部件在 DrawerHeader 小部件下方生成一条微弱的线。如何删除它？我已经尝试了装饰选项，到目前为止我发现的唯一方法是从 DrawerHeader 切换到自定义小部件，如果可能的话，我想避免这种情况。

以下是 Flutter.dev 指南中的代码，其中 DrawerHeader 颜色设置为白色，因此该行可见。

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const appTitle = 'Drawer Demo';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(title)),
body: const Center(
child: Text('My Page!'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.white,
),
child: Text('Drawer Header'),
),
ListTile(
title: const Text('Item 1'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: const Text('Item 2'),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
);
}
}

编辑：它似乎是从drawer_header.dart(std lib)文件中的这一行添加的。第 85 行。无论如何我都看不到禁用它。

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

Answer 1

这是一个解决方案。只需将您的抽屉头小部件包装在主题小部件中并应用此数据，或者只需在您的DividerThemeData和 Booom 中设置透明颜色。

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

Answer 2

编辑：在了解主题小部件后简化了以下答案，该小部件可用于将主题精细地应用于UI的子部分。

问题陈述

DrawerHeader只是一个带有子AnimatedContainer的容器。两者都有装饰属性。

我们可以修改子项的装饰属性(因为它接收我们设置为 DrawerHead 的装饰)，但不能修改父项的装饰属性，其中微弱的线条实际上是作为带有底部边框的分隔符小部件添加的。

但是，该边框的颜色和宽度都使用上下文的DividerTheme或Theme(按该顺序)，我们可以通过全局或局部主题进行设置。

溶液

看到这个答案。

Answer 3

为了使分隔线不可见，也许可以使装饰透明：

decoration: BoxDecoration(
color: Colors.transparent
)

可能希望确保您也使用的是最新版本。

Answer 4

移除 DrawerHeader 并放置一个容器。它的工作方式相同，但没有线。

drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
Container(
decoration: const BoxDecoration(
color: Colors.white,
),
child: const Text('Drawer Header'),
height: 220,
),
ListTile(
title: const Text('Item 1'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: const Text('Item 2'),
onTap: () {
Navigator.pop(context);
},
),
],
),
),

(不过我不推荐它。尝试使用其他用户界面小部件。(不是抽屉))。