{"id":19273084,"url":"https://github.com/fluttercandies/stack_board","last_synced_at":"2025-04-21T22:32:40.854Z","repository":{"id":37375217,"uuid":"422843446","full_name":"fluttercandies/stack_board","owner":"fluttercandies","description":"层叠控件摆放","archived":false,"fork":false,"pushed_at":"2023-01-19T10:05:31.000Z","size":6280,"stargazers_count":50,"open_issues_count":4,"forks_count":13,"subscribers_count":3,"default_branch":"master","last_synced_at":"2023-08-20T23:14:54.548Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fluttercandies.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-30T09:58:41.000Z","updated_at":"2023-07-20T05:01:33.000Z","dependencies_parsed_at":"2023-02-10T22:16:31.647Z","dependency_job_id":null,"html_url":"https://github.com/fluttercandies/stack_board","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fstack_board","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fstack_board/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fstack_board/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fstack_board/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fluttercandies","download_url":"https://codeload.github.com/fluttercandies/stack_board/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223881795,"owners_count":17219268,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T20:40:54.740Z","updated_at":"2024-11-09T20:40:55.408Z","avatar_url":"https://github.com/fluttercandies.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stack Board\n\nA Flutter package of custom stack board. \n\n[![pub package](https://img.shields.io/pub/v/stack_board?logo=dart\u0026label=stable\u0026style=flat-square)](https://pub.dev/packages/stack_board)\n[![GitHub stars](https://img.shields.io/github/stars/fluttercandies/stack_board?logo=github\u0026style=flat-square)](https://github.com/fluttercandies/stack_board/stargazers)\n[![GitHub forks](https://img.shields.io/github/forks/fluttercandies/stack_board?logo=github\u0026style=flat-square)](https://github.com/fluttercandies/stack_board/network/members)\n[![CodeFactor](https://img.shields.io/codefactor/grade/github/fluttercandies/stack_board?logo=codefactor\u0026logoColor=%23ffffff\u0026style=flat-square)](https://www.codefactor.io/repository/github/fluttercandies/stack_board)\n\u003ca target=\"_blank\" href=\"https://jq.qq.com/?_wv=1027\u0026k=5bcc0gy\"\u003e\u003cimg border=\"0\" src=\"https://pub.idqqimg.com/wpa/images/group.png\" alt=\"FlutterCandies\" title=\"FlutterCandies\"\u003e\u003c/a\u003e\n\n\u003cbr\u003e\n\nTry it: [Demo](https://xsilencex.github.io/stack_board_demo/)\n\n\u003cbr\u003e\n\n## 1.使用 StackBoardController\n\n\u003cbr\u003e\n\n```dart\nimport 'package:stack_board/stack_board.dart';\n\nStackBoard(\n    controller: _boardController,\n    ///添加背景\n    background: const ColoredBox(color: Colors.grey),\n),\n```\n\n### 添加自适应文本\n\n\u003cbr\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/xSILENCEx/project_images/main/stack_board/sb_txt.gif\" height=400\u003e\n\n\u003cbr\u003e\n\n```dart\n_boardController.add(\n    const AdaptiveText(\n        'Flutter Candies',\n        tapToEdit: true,\n        style: TextStyle(fontWeight: FontWeight.bold),\n    ),\n);\n```\n\n\u003cbr\u003e\n\n### 添加自适应图片\n\n\u003cbr\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/xSILENCEx/project_images/main/stack_board/sb_image.gif\" height=400\u003e\n\n\u003cbr\u003e\n\n```dart\n_boardController.add(\n    StackBoardItem(\n        child: Image.network('https://avatars.githubusercontent.com/u/47586449?s=200\u0026v=4'),\n    ),\n);\n```\n\n\u003cbr\u003e\n\n### 添加画板\n\n\u003cbr\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/xSILENCEx/project_images/main/stack_board/sb_draw.gif\" height=400\u003e\n\n\u003cbr\u003e\n\n```dart\n_boardController.add(\n    const StackDrawing(\n        caseStyle: CaseStyle(\n            borderColor: Colors.grey,\n            iconColor: Colors.white,\n            boxAspectRatio: 1,\n        ),\n    ),\n);\n```\n\n\u003cbr\u003e\n\n### 添加自定义item\n\n\u003cbr\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/xSILENCEx/project_images/main/stack_board/sb_custom.gif\" height=400\u003e\n\n\u003cbr\u003e\n\n\u003e 1.继承自 StackItemContent 和 StackItem\n```dart\nclass ColorContent extends StackItemContent {\n  ColorContent({required this.color});\n\n  Color color;\n\n  @override\n  Map\u003cString, dynamic\u003e toJson() {\n    return \u003cString, dynamic\u003e{\n      'color': color.value,\n    };\n  }\n}\n\nclass ColorStackItem extends StackItem\u003cColorContent\u003e {\n  ColorStackItem({\n    required Size size,\n    String? id,\n    Offset? offset,\n    double? angle,\n    StackItemStatus? status,\n    ColorContent? content,\n  }) : super(\n          id: id,\n          size: size,\n          offset: offset,\n          angle: angle,\n          status: status,\n          content: content,\n        );\n\n  @override\n  ColorStackItem copyWith({\n    Size? size,\n    Offset? offset,\n    double? angle,\n    StackItemStatus? status,\n    ColorContent? content,\n  }) {\n    return ColorStackItem(\n      id: id, // \u003c= must !!\n      size: size ?? this.size,\n      offset: offset ?? this.offset,\n      angle: angle ?? this.angle,\n      status: status ?? this.status,\n      content: content ?? this.content,\n    );\n  }\n}\n```\n\u003e 2.使用controller添加\n```dart\nimport 'dart:math' as math;\n\n...\n\n/// Add custom item\nvoid _addCustomItem() {\n    final Color color = Colors.primaries[Random().nextInt(Colors.primaries.length)];\n    _boardController.addItem(\n        ColorStackItem(\n        size: const Size.square(100),\n        content: ColorContent(color: color),\n        ),\n    );\n}\n```\n\u003e 3.使用customBuilder构建\n```dart\nStackBoard(\n    controller: _boardController,\n        /// 如果使用了继承于StackBoardItem的自定义item\n        /// 使用这个接口进行重构\n      customBuilder: (StackItem\u003cStackItemContent\u003e item) {\n          if (...) {\n\n           ...\n\n          } else if (item is ColorStackItem) {\n            return Container(\n              width: item.size.width,\n              height: item.size.height,\n              color: item.content?.color,\n            );\n          }\n\n          ...\n        },\n)\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluttercandies%2Fstack_board","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffluttercandies%2Fstack_board","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluttercandies%2Fstack_board/lists"}