Question

您好，我是扑朔迷离/堆叠溢出的新手，我正在尝试创建一个分为三个部分的导航抽屉：“个人资料图片”，“列表”图块和一个底部图片，该图片将覆盖抽屉的其余部分，如图3所示。图像中的矩形。

我的问题是底部图像。我知道我可以在列表视图中添加图像资产，但是它不会自动填充抽屉的其余部分。我的想法是在列表视图之后添加一个子项，但出现错误：“已指定命名参数'child'的参数”

谁能解释为什么这个逻辑不起作用，我如何使它起作用？谢谢！

    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小部件是一个只有一个子级的单子级小部件。如果您希望实现自己的期望，则需要使用Column的子元素Container。该列将具有子级，其中一个是列表，一个是底部图像。

图像将使用底部的所有空间，因此您可以将其包装在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
          )
        ]),
      ),
    );
  }
}

颤动的抽屉底部图像

1 个答案: