Flutter、材质、去除DrawerHeader下的淡线

Caz*_*tor 7 flutter

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);
              },
            ),
          ],
        ),
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

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

        border: Border(
          bottom: Divider.createBorderSide(context),
        ),
Run Code Online (Sandbox Code Playgroud)

小智 9

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

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


jsp*_*cal 0

要使分隔线不可见,也许可以使装饰透明:

decoration: BoxDecoration(
    color: Colors.transparent
)
Run Code Online (Sandbox Code Playgroud)

可能想确保您也使用最新版本。