# project-2

**Repository Path**: lucky_lxz/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**: 1
- **Forks**: 17
- **Created**: 2022-04-20
- **Last Updated**: 2022-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flutter UI for Python

#### 代码已更新，请互相通知 2022-04-16 14:50:00

- 我发现大部分的 Material Design Component (MDC) 需要配上代码才可以正确显示。
- 我对 web/py_lib/flutter.py 作了相应的更改 (见454和503行)。
- 另外我添加了 web/lib/mdc_test.html, 里面展示了大部分的 MDC 控件的使用 (编辑器打开看源代码，双击浏览器打开看效果)。







### data_table

实现了`PaginatedDataTable`类，主要的参数有：

- 表头
- 表格内容

想要更换表格内容可以修改这两个list

```python
headlist = ['Dessert', 'Carbs (g)', 'Protein (g)', 'Comments']
bodylist = [['Frozen yogurt', '24', '4.0', 'Super tasty'],
            ['Ice cream sandwich', '37', '4.33333333333', 'I like ice cream more'],
            ['Eclair', '24', '6.0', 'New filing flavor']]
```



需要注意的细节就是无论是表头还是表格内容，数字的列和非数字的列要稍微区分一下，就是在html代码中有无`mdc-data-table__cell--numeric`这个类

最终效果：

<img src="./test_image/test_data_table_1.png" style="zoom:80%;" /><img src="./test_image/test_data_table_2.png" alt="test_data_table_2" style="zoom:80%;" />



### text_field

实现的大致细节和data_table没什么区别，唯一多的就是一个点击事件，需要在Container中添加一个点击事件，如果是点击的是text_field，那么hint_text会上浮变色，同时下面可以打字，如果点击的是text_field外面的内容，那么将会取消上浮

<img src="./test_image/test_text_field_1.png" alt="test_text_field_1" style="zoom:80%;" /><img src="./test_image/test_text_field_2.png" alt="test_text_field_2" style="zoom:80%;" />