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

Posted 2023-04-13

【中文标题】我想在 Flutter 中创建一个照片抽屉

【英文标题】：I want to create as a photo drawer in Flutter

【发布时间】：2021-12-30 00:23:39

【问题描述】：

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

我创建了一个抽屉，它工作正常，但不知道如何使用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);
              ,
            ),
          ],
        ),
      ),
    );
  

【问题讨论】：

这是一个问答网站...不是教程论坛...描述您尝试过的内容...包括任何代码和错误消息...还可以提出一个具体的、可回答的问题

是的，现在我添加了我的代码和图像，如下所示只是我需要i.stack.imgur.com/0VLdY.png

【参考方案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);
              ,
            ),
          ],
        ),
      ),

【讨论】：

但是我的空间太小了，请帮帮我....

i.stack.imgur.com/viYQm.png

你可以看到我上面的图片#

您的代码无法按照我的需要运行。它只工作 80%

如果您正在处理，请回复