# project-2

**Repository Path**: yan-yuanxing/project-2

## Basic Information

- **Project Name**: project-2
- **Description**: No description available
- **Primary Language**: Python
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 17
- **Created**: 2022-04-15
- **Last Updated**: 2022-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flutter UI for Python
#### 完成情况 2022-04-28 16:29:00

我完成的是lists和tabs简化版的例子

大概流程过程如下：

    - 首先我在https://material.io/components/lists和https://material.io/components/tabs找到lists和tabs的样例代码
    - 找到相应的Flutter代码，参考它构建类的接口
    - 再对照相应的Web代码，作为新建类的具体实现
    - 编写调试代码验证结果

相关细节：

    - 对于lists这个Widget，我构建了两个类，一个是ListTile可以新建list的一项，另一个是ListView新建的是整个list的框架。
      详细参考的Web代码如下：

![输入图片说明](%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87/image.png)

      编写的代码如下：

![输入图片说明](%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87/image4.png)
![输入图片说明](%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87/image5.png)

    - 对于tabs这个Widget，同样我构建了两个类，一个是Tab可以新建tab的一项，另一个是TabBar新建的是整个tab的框架。
      详细参考的Web代码如下：

![输入图片说明](%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87/image1.png)

      编写的代码如下：

![输入图片说明](%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87/image6.png)
![输入图片说明](%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87/image7.png)

遇到的问题：

    - 网页提供Flutter代码和Web代码并不是完全对应的，有些参数在Web代码上并没有体现，所以我只能简化相关内容。 
    - 一些简单的赋值、maketag、appendChild等操作（可以确认没有写错）总是会导致程序运行出现问题（黑屏没有画面），这导致花了很长时间
    完成，很多额外想做内容只能放弃。有时候能复制之前没有出现问题的语句再改成一样的内容可行。目前不知道为什么会这样。
    - 老师后面更新了代码，进行了调整

效果如下：

    - lists+tabs

![输入图片说明](%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87/image2.png)

    - lists与tabs都可调整项目数量、每个项的文字内容和icon

![输入图片说明](%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87/image3.png)