本公开的实施例提供了一种基于Flutter组件的界面编辑方法、装置、设备以及存储介质，应用于用户界面设计和开发技术领域。所述方法包括响应用户输入的用户界面编辑业务需求信息，显示图形拖放界面，图形拖放界面包括至少一种可拖放的预设Flutter组件，每种Flutter组件对应有属性编辑器；再响应用户在图形拖放界面中选择、放置和排列预设Flutter组件的拖放操作或者属性设置操作，生成对应的Dart代码；再根据Dart代码进行用户界面编辑。以此方式，可以允许用户通过拖放方式直接操作和布局Flutter组件，以便直观地构建用户界面，并实时生成对应的Flutter编程语言而无需编写代码，这样不仅降低了技术门槛，也提高了开发效率和协作流畅度。
【技术实现步骤摘要】
本公开涉及计算机，尤其涉及用户界面设计和开发，具体涉及一种基于flutter组件的界面编辑方法、装置、设备以及存储介质。
技术介绍
1、当前，在flutter应用的用户界面(user interface，ui)设计和开发过程中，面临flutter学习曲线、开发效率和实时预览需求等多重关键问题。
2、例如，针对flutter学习曲线问题，flutter虽然强大，但对于初学者和非程序员来说，学习如何正确使用以及编写dart代码进行界面设计可以说相当具有挑战性；针对开发效率问题，在当前的flutter开发流程中，ui设计往往需要设计师和开发者之间的频繁协作，设计师设计界面，而开发者则需要将这些设计转化为代码，这个过程不仅效率低下，而且容易因沟通不畅导致错误；针对实时预览的需求问题，开发者在调整ui时，常常需要反复编译和运行应用以查看更改效果，这个过程既耗时又低效。
技术实现思路
1、本公开提供了一种基于flutter组件的界面编辑方法、装置、设备以及存储介质。
2、根据本公开的第一方面，提供了一种基于flutter组件的界面编辑方法。该方法包括：
3、响应用户输入的用户界面编辑业务需求信息，显示图形拖放界面，所述图形拖放界面包括至少一种可拖放的预设flutter组件，每种flutter组件对应有属性编辑器；
4、响应用户在所述图形拖放界面中选择、放置和排列预设flutter组件的拖放操作或者属性设置操作，生成对应的dart代码；
>5、根据所述dart代码进行用户界面编辑。6、如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述图形拖放界面中的预设flutter组件采用flutter框架中的draggable小部件和drag target小部件接收用户的所述拖放操作，采用flutter框架中的form小部件和form field小部件收集和验证用户输入的所述属性设置操作；
7、其中，所述属性设置操作包括设置预设flutter组件的大小、颜色、边距、标识、属性字典和字段，以及更新用户拖放动态。
8、如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述响应用户在所述图形拖放界面中选择、放置和排列预设flutter组件的拖放操作或者属性设置操作，生成对应的dart代码包括：
9、响应用户在所述图形拖放界面中选择、放置和排列预设flutter组件的拖放操作或者属性设置操作，基于预设代码模版生成对应的dart代码；
10、其中，所述预设代码模版为预设代码生成引擎监听所述图形拖放界面中组件树结构并遍历组件树得到的；所述组件树包括所述图形拖放界面中各预设flutter组件和各预设flutter组件对应的代码模版。
11、如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述组件树为使用正则表达式和抽象语法树解析器分析和解构历史dart代码，并将其映射回flutter组件和属性构建的；所述组件树中组件可通过json配置或api调用添加。
12、如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述方法还包括：
13、采用flutter框架中的statefulwidget类和state类来管理编辑后的用户界面，并调用flutter框架中的setstate()方法触发编辑后的用户界面重建和更新。
14、如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述用户为多端用户，所述响应用户在所述图形拖放界面中选择、放置和排列预设flutter组件的拖放操作或者属性设置操作，生成对应的dart代码包括：
15、基于预设同步算法，响应多端用户在所述图形拖放界面中选择、放置和排列预设flutter组件的拖放操作或者属性设置操作，生成各用户端对应的dart代码。
16、如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，在所述根据所述dart代码进行用户界面编辑之前，所述方法还包括：
17、基于预设语法检查器对所述dart代码进行识别。
18、根据本公开的第二方面，提供了一种基于flutter组件的界面编辑装置。该装置包括：
19、显示模块，用于响应用户输入的用户界面编辑业务需求信息，显示图形拖放界面，所述图形拖放界面包括至少一种可拖放的预设flutter组件，每种flutter组件对应有属性编辑器；
20、生成模块，用于响应用户在所述图形拖放界面中选择、放置和排列预设flutter组件的拖放操作或者属性设置操作，生成对应的dart代码；
21、编辑模块，用于根据所述dart代码进行用户界面编辑。
22、根据本公开的第三方面，提供了一种电子设备。该电子设备包括：存储器和处理器，所述存储器上存储有计算机程序，所述处理器执行所述程序时实现如以上所述的方法。
23、根据本公开的第四方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如以上所述的方法。
24、本申请实施例提供的一种基于flutter组件的界面编辑方法、装置、设备以及存储介质，能够通过响应用户输入的用户界面编辑业务需求信息，显示图形拖放界面，图形拖放界面包括至少一种可拖放的预设flutter组件，每种flutter组件对应有属性编辑器；再响应用户在图形拖放界面中选择、放置和排列预设flutter组件的拖放操作或者属性设置操作，生成对应的dart代码；再根据dart代码进行用户界面编辑；基于此，可以为用户提供一个用于简化flutter应用的用户界面设计和开发过程的基于flutter的组件可视化拖动界面编辑器，这个编辑器提供一个图形化的图形拖放界面，允许用户通过拖放方式直接操作和布局flutter组件，以便直观地构建用户界面，并实时生成对应的flutter编程语言，即dart代码，而无需编写代码，这样不仅降低了技术门槛，也提高了开发效率和协作流畅度。
25、应当理解，
技术实现思路
部分中所描述的内容并非旨在限定本公开的实施例的关键或重要特征，亦非用于限制本公开的范围。本公开的其它特征将通过以下的描述变得容易理解。
本文档来自技高网...
【技术保护点】
1.一种基于Flutter组件的界面编辑方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，所述图形拖放界面中的预设Flutter组件采用Flutter框架中的Draggable小部件和Drag Target小部件接收用户的所述拖放操作，采用Flutter框架中的Form小部件和Form Field小部件收集和验证用户输入的所述属性设置操作；
3.根据权利要求1所述的方法，其特征在于，所述响应用户在所述图形拖放界面中选择、放置和排列预设Flutter组件的拖放操作或者属性设置操作，生成对应的Dart代码包括：
4.根据权利要求3所述的方法，其特征在于，所述组件树为使用正则表达式和抽象语法树解析器分析和解构历史Dart代码，并将其映射回Flutter组件和属性构建的；所述组件树中组件可通过JSON配置或API调用添加。
5.根据权利要求1至4中任一权利要求所述的方法，其特征在于，所述方法还包括：
6.根据权利要求1至4中任一权利要求所述的方法，其特征在于，所述用户为多端用户，所述响应用户在所述图形拖放界面中选择、放置和排列预设Flutter组件的拖放操作或者属性设置操作，生成对应的Dart代码包括：
7.根据权利要求1至4中任一权利要求所述的方法，其特征在于，在所述根据所述Dart代码进行用户界面编辑之前，所述方法还包括：
8.一种基于Flutter组件的界面编辑装置，其特征在于，包括：
9.一种电子设备，其特征在于，包括：
10.一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，所述计算机指令用于使所述计算机执行根据权利要求1-7中任一权利要求所述的方法。
...
【技术特征摘要】
1.一种基于flutter组件的界面编辑方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，所述图形拖放界面中的预设flutter组件采用flutter框架中的draggable小部件和drag target小部件接收用户的所述拖放操作，采用flutter框架中的form小部件和form field小部件收集和验证用户输入的所述属性设置操作；
3.根据权利要求1所述的方法，其特征在于，所述响应用户在所述图形拖放界面中选择、放置和排列预设flutter组件的拖放操作或者属性设置操作，生成对应的dart代码包括：
4.根据权利要求3所述的方法，其特征在于，所述组件树为使用正则表达式和抽象语法树解析器分析和解构历史dart代码，并将其映射回flutter组件和属性构建的；所述组件树中组件可通过json...
【专利技术属性】
技术研发人员：魏冬冬，
申请(专利权)人：乐视新生代北京文化传媒有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。