Flutter抽屉底图

Question

你好，我对 flutter/stack overflow 还很陌生，我正在尝试创建一个导航抽屉，分为 3 个部分：个人资料图片、列表图块和覆盖抽屉其余部分的底部图片如图中的 3 个矩形所示。

我的问题出在底部图片上。我知道我可以在列表视图中添加图像资产，但它不会自动填充抽屉的其余部分。我的想法是在列表视图后添加一个 child 但我得到一个错误："the argument for the named parameter 'child' was already specified"

谁能解释为什么这个逻辑不起作用，我怎样才能让它起作用？谢谢！

    import 'package:flutter/material.dart';

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Container(
        child: ListView(
          children: <Widget>[
            // ***PROFILE IMAGE
            Container(
              height: 250,
              child: DrawerHeader(
                child: Container(
                  child: Column(
                    children: <Widget>[
                      Material(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Image.asset('assets/images/user.png',width: 200,height: 200,),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
            // ***LIST TILE
            CustomListTile(Icons.person, 'Profile',()=>{}),
            CustomListTile(Icons.add_location, 'Condominium',()=>{}),
            CustomListTile(Icons.map, 'Plan',()=>{}),
            CustomListTile(Icons.color_lens, 'Design',()=>{}),
          ],
        ),
        child: // ** I WOULD LIKE TO ADD PICTURE HERE
      ),
    );
  }
}

Answer 1

主要问题是 Container 小部件是一个 child 小部件，只有一个 child。如果你想按照你的期望实现，你需要使用一个Column是一个child的Container。该列将有 children，其中一个是列表，一个是底部图像。

图像将使用底部的所有 space，因此您可以包裹在 Expanded 小部件中。

这是一个示例代码：

import 'package:flutter/material.dart';

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Container(
        child: Column(children: [
          ListView(
          children: <Widget>[
            // ***PROFILE IMAGE
            Container(
              height: 250,
              child: DrawerHeader(
                child: Container(
                  child: Column(
                    children: <Widget>[
                      Material(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Image.asset('assets/images/user.png',width: 200,height: 200,),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
            // ***LIST TILE
            CustomListTile(Icons.person, 'Profile',()=>{}),
            CustomListTile(Icons.add_location, 'Condominium',()=>{}),
            CustomListTile(Icons.map, 'Plan',()=>{}),
            CustomListTile(Icons.color_lens, 'Design',()=>{}),
          ],
        ),
          Expanded(
            child: // Your image here
          )
        ]),
      ),
    );
  }
}

Flutter抽屉底图

Flutter drawer bottom image

drawer

flutter