flutter - 使用可拖动的颤振创建文件夹

Question

我正在使用颤振制作一个安卓启动器。我已经使用 DragAndDropGridView 制作了一个应用程序列表，但是如何才能创建图标文件夹？

标签： flutterdart

Answer 1

我做了一个示例应用程序作为演示，但我没有使用 DragAndDropGridView 包，因为它已经过时了。相反，我使用了 reorderables 包。

编码

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<Widget> apps = <Widget>[
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppFolder(),
    AppIcon()
  ];
  void _onReorder(int oldIndex, int newIndex) {
    setState(() {
      Widget row = apps.removeAt(oldIndex);
      apps.insert(newIndex, row);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: [
        ReorderableWrap(
            spacing: 8.0,
            runSpacing: 4.0,
            padding: const EdgeInsets.all(8),
            children: apps,
            onReorder: _onReorder,
            onNoReorder: (int index) {},
            onReorderStarted: (int index) {}),
      ]),
    );
  }
}

class AppIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 100,
        width: 100,
        alignment: Alignment.center,
        color: generateRandomColor(),
        child: Text("App Icon"));
  }
}

class AppFolder extends StatefulWidget {
  @override
  _AppFolderState createState() => _AppFolderState();
}

class _AppFolderState extends State<AppFolder> {
  List<Widget> folderApps = <Widget>[
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppIcon(),
    AppIcon(),
  ];

  void _onReorder(int oldIndex, int newIndex) {
    setState(() {
      Widget row = folderApps.removeAt(oldIndex);
      folderApps.insert(newIndex, row);
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextButton(
        onPressed: () {
          showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  backgroundColor: Colors.white,
                  content: Container(
                    alignment: Alignment.center,
                    height: 350,
                    width: 350,
                    child: ReorderableWrap(
                        spacing: 8.0,
                        runSpacing: 4.0,
                        padding: const EdgeInsets.all(8),
                        children: folderApps,
                        onReorder: _onReorder,
                        onNoReorder: (int index) {},
                        onReorderStarted: (int index) {}),
                  ),
                );
              });
        },
        child: Image.network(
            "https://icons.iconarchive.com/icons/alecive/flatwoken/512/Apps-Folder-icon.png",
            height: 100,
            width: 100));
  }
}

Color generateRandomColor() {
  Random random = Random();

  return Color.fromARGB(
      255, random.nextInt(256), random.nextInt(256), random.nextInt(256));
}

[代码可能并不完美，仅用于演示]

我使用 TextButton 创建了一个应用程序文件夹，当它被按下时会显示一个 AlertDialog，在文件夹内还有另一个 ReorderableWrap 和更多应用程序。

视频

（每次拖动后颜色都会改变，因为我没有给出固定的颜色，不要被它弄糊涂）