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),
),
4条答案
按热度按时间qqrboqgw1#
编辑：在了解了Theme widget之后，简化了下面的答案，Theme widget可以用于将主题精细地应用到UI的子部分。
问题陈述
一个DrawerHeader只是一个Container，它有一个子AnimatedContainer。这两个容器都有一个 * decoration * 属性。
我们可以修改子对象的 * decoration * 属性（因为它接收我们设置给DrawerHeader的 * decoration *），但不能修改父对象的 * decoration * 属性，父对象内部的模糊线实际上是作为一个带有底部边框的Divider小部件添加的。
但是，边框的 * color * 和 * width * 都使用了 * context * 的DividerTheme或Theme（按此顺序），我们可以通过全局或局部主题设置它们。
溶液
参见this answer。
ss2ws0br2#
使分隔器看不见，或者使装饰透明：
可能要确保您也使用最新版本。
pn9klfpd3#
删除DrawerHeader并放置一个容器。它的工作方式相同，但没有线条。
（我不推荐它。尝试不同的用户界面小部件。（不是抽屉））。
lf5gs5x24#
这里有一个解决方案。只需将你的drawerheader小部件 Package 在Theme小部件中并应用这些数据，或者在你的
DividerThemeData和Booom中设置透明色。