我想在 Flutter 中创建一个照片抽屉

Question

我正在尝试创建像这样的照片抽屉

我创建了一个抽屉，它工作正常，但不知道如何使用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(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: const Text('Item 1'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Item 2'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

这是一个基于你所附图片的原型，通过code-cmets，如果你也可以用SizedBox(height:x,weight:x)包装Drawer你喜欢的方式。

LayoutBuilder用于获取Drawer的大小，也可以使用Drawer的默认高度，定义如下

 final double statusBarHeight = MediaQuery.of(context).padding.top;
const double _kDrawerHeaderHeight = 160.0 + 1.0; // bottom edge

详细了解Align 和其他widgets

drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
                padding: EdgeInsets.zero,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      // change the colors you want
                      Colors.blueGrey,
                      Colors.blueAccent,
                    ],
                  ),
                ),
                child: LayoutBuilder(builder: (context, constraints) {
                  return Stack(
                    children: [
                      Align(
                        alignment: Alignment.bottomCenter,
                        child: Container(
                          height:
                              constraints.maxHeight / 2, // half white on drawer
                          color: Colors.white,
                        ),
                      ),
                      Align(
                        alignment: const Alignment(-.85, 0),
                        child: Container(
                          ///change with asset image
                          decoration: BoxDecoration(
                              color: Colors.white,
                              shape: BoxShape.circle,
                              border: Border.all(
                                // you can also provide height/width of container with without using border while both are using same color
                                width: 8,
                                color: Colors.white,
                              ) //white radius around image
                              ),
                          child: Icon(
                            Icons.person,
                            size: constraints.maxHeight / 3,
                          ),
                        ),
                      ),
                      const Align(
                        alignment: Alignment(.3, -.2),
                        child: Text(
                          "UserName",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 23,
                          ),
                        ),
                      ),
                      Align(
                        alignment: Alignment.topRight,
                        child: IconButton(
                            onPressed: () {
                              Navigator.of(context).pop(); //close the drawer
                            },
                            icon: Icon(
                              Icons.close,
                              color: Colors.white,
                            )),
                      )
                    ],
                  );
                })),
            ListTile(
              title: const Text('Item 1'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Item 2'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),