Flutter - 如何更改抽屉标题图像的大小和对齐方式？

Question

我正在尝试创建一个抽屉，标题是徽标。

如何更改抽屉标题图像的大小和对齐方式？

我希望图像更小并左对齐。

我试过了，但无法调整大小和对齐方式。

示例代码：

Scaffold(
        key: _key,
        drawer: Drawer(
          child: ListView(
              // Important: Remove any padding from the ListView.
              padding: EdgeInsets.zero,
              children: [
                DrawerHeader(
                  padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
                  child: Image.asset(
                    'images/logo.png',
                    width: 10,
                  ),
                ),
              ]),
        ),
        appBar: PreferredSize(
          preferredSize: const Size.fromHeight(80.0),
          child: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0,
            flexibleSpace:
                Row(mainAxisAlignment: MainAxisAlignment.center, children: [
              Padding(
                padding: const EdgeInsets.only(top: 0),
                child: Image.asset(
                  'images/logo.png',
                  fit: BoxFit.cover,
                  width: 80,
                ),
              ),
            ]),
            leading: Padding(
              padding: const EdgeInsets.only(top: 20),
              child: IconButton(
                onPressed: () => _key.currentState!.openDrawer(),
                icon: const Icon(
                  Icons.menu,
                  size: 27,
                  color: Color(0xff5f2dea),
                ),
              ),
            ),

Answer 1

只需用

Image

包裹您的

COntainer

并指定大小和对齐方式：

DrawerHeader(
                    padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
                    child: Container(
                      width: 30,
                      alignment: Alignment.centerLeft,
                      child: Image.asset(
                        'images/logo.png',
                        width: 10,
                      ),
                    ))

Answer 2

尝试下面的代码将您的图像包裹在

Container

或

Align

小部件中并设置

alignment: Alignment.centerLeft,

 DrawerHeader(
          child: Container(
            alignment: Alignment.centerLeft,
            child: Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/800px-Mastercard-logo.svg.png',
              width: 50,
              height: 50,
            ),
          ),
        ),

结果->

Answer 3

非常简单。只需用 container 包裹图像小部件并给出高度和宽度。

Answer 4

   drawer: Drawer(
      child: Column(
        children: [
          DrawerHeader(
              child: Align(
            alignment: Alignment.centerLeft,
            child: Image.asset(
              "assets/icons/icon.png",
              height: 100,
              width: 100,
            ),
          )),
          Expanded(
            child: ListView(
              children: const [Text("widget 1"), Text("widget 2")],
            ),
          )
        ],
      ),
    ),