时间戳

首页 > 解决方案 > 大家好！我不知道如何正确重构我的代码。我想通过数组制作一个小部件列表，怎么做？

listview - 大家好！我不知道如何正确重构我的代码。我想通过数组制作一个小部件列表，怎么做？

问题描述

我的小部件看起来像这样

Widget build(BuildContext context) {
    Widget _bottomNavigationMenu() {
      return Container(
        margin: const EdgeInsets.only(bottom: 30.0),
        child: Wrap(
          crossAxisAlignment: WrapCrossAlignment.end,
          alignment: WrapAlignment.spaceAround,
          spacing: 18.0,
          runSpacing: 20.0,
          children: <Widget>[
            BottomMenuBtn(
              nameIcon: "assets/icons/gps.png",
              onPressed: () {
                Navigator.pushNamed(context, '/locationhistory');
              },
              textBtn: "Location history",
            ),
            BottomMenuBtn(
              textBtn: "Email",
              nameIcon: "assets/icons/mail.png",
              onPressed: () {
                Navigator.pushNamed(context, '/email');
              },
            ),
            BottomMenuBtn(
              textBtn: "Social Media",
              nameIcon: "assets/icons/social.png",
              onPressed: () {
                Navigator.pushNamed(context, '/socialmedia');
              },
            ),
            BottomMenuBtn(
              textBtn: "Screen Time",
              nameIcon: "assets/icons/screen.png",
              onPressed: () {
                Navigator.pushNamed(context, '/screentime');
              },
            ),
            BottomMenuBtn(
              textBtn: "Activity report",
              nameIcon: "assets/icons/activity.png",
              onPressed: () {
                Navigator.pushNamed(context, '/activity');
              },
            ),
            BottomMenuBtn(
              textBtn: "Calls",
              nameIcon: "assets/icons/call.png",
              onPressed: () {
                Navigator.pushNamed(context, '/calls');
              },
            ),
          ],
        ),
      );
    }

我想得到这样的东西---> 创建列表？

我尝试通过 map 方法解析按钮列表，以免观察到如此大量的代码。

如何正确映射此列表？也许我需要别的东西？

.....
children: <Widget> [
bottomMenuLists.map((item) => {
 **what write here?**
 *BottomMenuBtn(item)* incorrect
})
]
....

感谢所有回复的人！

标签： listviewdartrefactoring

解决方案

如果您想让您的代码更简洁，您将需要抽象公共代码以便它只出现一次，然后以一种或另一种方式提供变化的数据。

代码的抽象通常是辅助函数的工作。

一种可能性是：

BottomMenuBtn _makeButton(String text, String iconName, String pushAction) =>
    BottomMenuBtn(
              textBtn: text,
              nameIcon: "assets/icons/$iconName.png",
              onPressed: () {
                Navigator.pushNamed(context, pushAction);
              });

然后您可以使用它来创建按钮，例如：

Widget build(BuildContext context) {
          ...
          children: <Widget>[
            _makeButton("Location history", "gps", "/locationhistory"),
            _makeButton("Email", "mail", "/email"),
            ...
            _makeButton("Calls", "calls", "/calls"),
          ],
       ...

辅助函数不是保存这三个数据点的对象列表，然后迭代列表以创建另一个列表，而是允许您将数据写入使用它的位置（更好的局部性）并且语法开销很小。

我要做其他事情的唯一情况是在编译时不知道数据。所以，如果有人递给我一份清单

class _MenuButtonInfo {
  final String text;
  final String iconName;
  final String pushAction;
  _MenuButtonInfo(this.text, this.iconName, this pushAction);
}

然后我会使用一个列表文字，如：

Widget build(BuildContext context) {
          ...
          children: <Widget>[
            for (var info in buttonInfos) BottomMenuBtn(
                textBtn: info.text,
                nameIcon: "assets/icons/${info.iconName}.png",
                onPressed: () {
                  Navigator.pushNamed(context, info.pushAction);
                })
          ],
       ...

推荐阅读