flutter/flutter-go
1
0
Fork 0
mirror of https://github.com/alibaba/flutter-go.git synced 2025-09-22 19:53:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update widget.md

Browse Source
This commit is contained in:
hanxu317317
2019-08-14 19:53:11 +08:00
committed by GitHub
parent a83bccda3b
commit 33cfaee893
1 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/widget.md
View File

@ -1,29 +1,33 @@
# 如何在Widget新增界面 # 如何在Widget目录新增界面
阅读文档前, 请先阅读 go-cli 文档 阅读文档前, 请先阅读 [go-cli(共建工具)](https://github.com/alibaba/flutter-go/blob/beta/docs/go-cli.md) 文档
在Widget列表页, 我们设有一个组, 名叫 **Developer**, 这个分组的作用是用来展示第三方作者提交的内容. 正常情况下会显示以下内容 在Widget列表页, 我们设有一个组, 名叫 **Developer**, 这个分组的作用是用来展示第三方作者提交的内容. 开发状态下正常情况下会显示以下内容
<img src="https://img.alicdn.com/tfs/TB1RCfZc1H2gK0jSZJnXXaT1FXa-798-1582.png" width='300px' /> <img src="https://img.alicdn.com/tfs/TB1RCfZc1H2gK0jSZJnXXaT1FXa-798-1582.png" width='300px' />
## 新建 Page ## 新建 Widget
在项目的根目录下使用 **goCLi createPage** 固定命令, 按照命令行提示信息. 输入新建界面的相关信息, 工具会自动的在 **lib/standard_pages/** 文件夹下创建一个Widget文件夹
在项目的根目录下使用 **goCLi createPage** 固定命令, 按照命令行提示信息. 输入新建界面的相关信息
``` ```
goCli createPage goCli createPage
``` ```
参考:
![](https://img.alicdn.com/tfs/TB1ms2Wc1H2gK0jSZFEXXcqMpXa-1393-228.gif) ![](https://img.alicdn.com/tfs/TB1C9qKdoY1gK0jSZFCXXcwqXXa-1314-928.png)
按照以上操作会得到以下信息输出: 按照以上操作会得到以下信息输出:
``` ```
{ {
界面位于 : lib/standard_pages/standard_for_slider_sanfan_8ab2b5c2_42ae_4241_9c8a_5c9e1f92b096 界面位于 : lib/standard_pages/name_author_06819c62_42ae_4241_9c8a_5c9e1f92b096
Id : 8ab2b5c2_42ae_4241_9c8a_5c9e1f92b096 Id : 06819c62_42ae_4241_9c8a_5c9e1f92b096
文件夹名称 : standard_for_slider_sanfan_8ab2b5c2_42ae_4241_9c8a_5c9e1f92b096 文件夹名称 : name_author_06819c62_42ae_4241_9c8a_5c9e1f92b096
} }
``` ```
### 字段注意事项 ### 字段注意事项
@ -37,26 +41,33 @@ goCli createPage
**email** 创建者的邮箱 **email** 创建者的邮箱
## 查看创建的 Page ## 查看创建的Widvet
为了能正确的加载出新的界面, 建议重新启动当前项目. 在**Widget -> Developer -> 本地代码**中,您可以找到您新建的界面 为了能正确的加载出新的界面, 建议重新启动当前项目. 在**Widget => Developer => 本地代码**中,您可以找到您新建的界面
<image src='https://img.alicdn.com/tfs/TB1eNLYc7Y2gK0jSZFgXXc5OFXa-744-722.png' width='300px' /> <image src='https://img.alicdn.com/tfs/TB1eNLYc7Y2gK0jSZFgXXc5OFXa-744-722.png' width='300px' />
> 注意在android studio中, 有些情况下会无法在 **project** 目录中看到新创建的界面, 通常工程重启后. 会显示出新创建的文件
## 编辑界面 ## 编辑界面
为了能动态的将**markdown**转化成**可识别**的内容, 需要在您项目中调用 **goCli watch**, 然后可以编辑以下位置的md文件, 更改当前文件内容, 即可动态更新我们详情页的内容. 为了能动态的将**markdown**转化成**Widget 页面可识别**的内容, 需要在您项目中调用 **goCli watch**, 然后可以编辑以下位置的md文件, 更改当前文件内容, 即可动态更新我们详情页的内容.
目标详情页
``` ```
lib/standard_pages/standard_for_slider_sanfan_8ab2b5c2_42ae_4241_9c8a_5c9e1f92b096/index.md lib/standard_pages/standard_for_slider_sanfan_8ab2b5c2_42ae_4241_9c8a_5c9e1f92b096/index.md
``` ```
参考: 参考:
![](https://img.alicdn.com/tfs/TB1cHLZc.T1gK0jSZFhXXaAtVXa-1393-760.gif) ![](https://img.alicdn.com/tfs/TB1cHLZc.T1gK0jSZFhXXaAtVXa-1393-760.gif)
## 引用Flutter 实例 ## 引用Flutter 实例
如何在markdown中引用flutter widget实例请参考: [WidgetDemo](https://github.com/alibaba/flutter-go/blob/beta/go-cli/utils/tpl.md) 如何在页面中引用flutter widget实例请参考: [WidgetDemo](https://github.com/alibaba/flutter-go/blob/beta/go-cli/utils/tpl.md)