README_CN.md

Finovy UIKit

轻量、可靠的移动端Flutter组件库

English | 中文版

一、使用方法

在pubspec.yaml文件dependencies节点加入：

fn_ui_kit:
  git:
    url: https://github.com/finovy/finovy_ui_kit.git

二、组件库基础信息

名称	fn_ui_kit
使用类别	UI类
开发框架	flutter
开发语言	Dart
最低环境要求	flutter >=3.0.0    dart >=2.17.0 <=4.0.0
当前版本	1.1.0
第三方依赖	auto_size_text  pin_code_fields   pull_to _refesh  visibility_detector
开源地址	https://github.com/finovy/finovy_ui_kit.git

三、组件库目录结构

fn_ui_kit
├── icons（svg通用图标：不会被编译进去）
│   ├── base （最常用的图标）
│   └── tabbar(底部导航栏图标)
├── lib (源代码) 
│   └── assets
│      ├── images （图片资源）
│      └── fn_icons.dart (通用图标引用类 类型IconData)│   
│      └── fn_icons_font.otf (通用图标生成的字体文件，pubspec.yaml文件里面引用)
│   └── src
│       ├── basic   (基础组件，包含文本Text、按钮Button、图片Image、图标Icon、输入框TextFiled、公共页面Page、标签Tag)
│       └── charts  (图表组件，包含折线图LineChart、柱状图BarChart等)
│       ├── constant(常量，包含颜色Color、字体大小FontSize、图片路径ImagePath)  
│       └── feedback (反馈组件，包含弹出确认框Dialog、轻提示框Toast、通知栏NoticeBar、步骤条Step)
│       ├── form    (表单组件，包含单元格Cell、复选框CheckBox，表格Form、单选框RadioButton，搜索组件Search,分栏组件Segment，星级投票Rate)
│       ├── third_lib(第三方库)
│       └── business(业务组件，包含验证码输入框VerifyInput、事件容器Event Container、状态占位组件EmptyWidget、日期选择DatePicker)
│       ├── theme   (主题组件，包含大部分组件的主题配置)
│       └── navigation (导航组件，包含导航栏AppBar、导航返回Back、网格组件Grid、脚手架Scaffold)
├── pubspec.yaml（项目配置信息）
└── README.md（英文描述文档）
├── README_CN.md（中文描述文档）
└── CHANGELOG.md （修改记录）

目录结构说明：

1. icons目录为通用，引用时并不会被编译进去；
2. src目录下的一级目录均为组件类别，如basic为基础组件类；
3. third_lib为第三方依赖库目录，为本地依赖，目的是设置固定版本确保组件库的版本稳定迭代更新；
4. pubspec.yaml为组件库的配置文件，组件库的版本信息以及相关依赖均在此文件体现；
5. CHANGELOG.md文件为每次迭代更新组件库版本时必须填写的文件，里面记录了每次组件库迭代更新的具体信息；
6. readme.md为组件库更新到其他平台如github、pub、gitlab等时的描述文件。

目录包含组件统计：

目录名称	组件类别	组件名称	组件描述	使用场景
basic （基础类）	button	FNUIButton	按钮组件，支持主要按钮、次要按钮、文字按钮，图标按钮	全局均可使用，支持三种状态（可用、禁用、加载中），支持边框自定义，文本自定义
	image	FNUIImage、	图片组件，支持网络图片、本地图片，支持指定模块加载；	全局使用
	input	FNUITextField、FNUIPasswordInput	输入组件，支持普通文本输入，键盘样式、文本样式等常规设置； 密码输入组件，支持普通密码输入，键盘样式、文本样式等常规设置；	交互式输入场景、验证场景
	text	FNUIText、 FNExpandLabel	文本组件，支持普通文本展示，文本样式自定义； 可折叠文本组件，支持多行文本的折叠和展开交互；	最常用的组件，全局使用； 需要多行文本展示折叠效果
	icon	FNUIIcon	图标组件，支持文本和图标样式自定义	全局使用，通用图标返回IconData
form （表单类）	form	FNUIForm	表单组件，支持表单带常规输入框、箭头式、多行文本式表单展示；	个人信息展示或修改场景、意见反馈等场景
	cell	FNUICell	表单单行组件，支持标题、内容、图标等展示	用户信息展示、资料展示场景
	radio	FNUIRadio	单选按钮组件，支持唯一单选控制和展示	用户单一选择数据场景
	checkbox	FNUICheckBox	复选按钮组件，支持多个选择控制和展示	用户选择多个数据场景
	table	FNUITable	表格组件，支持常规表头、内容展示	带表头的数据列表展示场景
	rate	FNUIRate	投票组件，支持投票、评级等icon展示	投票、评级场景
	search	FNUISearch	搜索组件，支持常规搜索视图展示	需要提供搜索服务的场景
	segment	FNUISegment	分栏组件，支持多组文本单一选择	需要选择或切换唯一分类的场景
feedback (操作反馈类)	toast	FNUIToast	轻提示组件，支持上中下位置展示，支持mask交互隔离	交互成功、失败、提醒弹窗场景，加载等待
	dialog	FNUIDialog	弹出框组件，支持弹出确认框、底部确认框、自定义按钮以及事件响应	交互确认场景、用户主动选择确认场景
	progress	FNUILinearProgress、 FNUICircularProgress	进度提示组件，支持线性、圆形视觉效果	明确需要进度展示的场景
navigation (导航类)	appbar	FNUIAppbar	顶部导航栏组件，支持常规背景、文字、按钮等配置	全局配置，路由导航页
	back	FNUINavBack	导航返回按钮	全局配置，路由导航页
	grid	FNUIGrid	网格组件，支持多种菜单	全局配置
	scaffold	FNUIScaffold	脚手架组件	全局配置
charts (图表类)	-	-	-	暂未完成封装
business (业务类)	verifycode	FNUIVerifyCodeInput	验证码输入组件，支持90%以上的验证码场景，可以高度自定义	用于登录、注册等验证码输入场景
	place_holder	FNUIEmpty	占位视图组件，支持无数据、请求错误、网络错误等多类别展示	用于视图占位场景，可根据实际需要选择
	picker	FNUIDatePicker	时间选择组件，支持时间选择多种样式	用于选择具体时间，支持常规时间格式化
	event	FNUIEventContainer	事件普通容器组件，继承普通容器，支持点击事件	需要容器带点击事件的场景
constant (常量类)	colors	FNColors	颜色常量类，归类设计稿上不同场景的颜色值，支持快捷访问	用于统一颜色值，配合主题使用
	fonts	FNFontSize	字体大小常量类，统一字体大小	用于统一项目内字体大小，一般不用额外指定
	images	FNImagePath	图片路径处理类，提供图片路径存储和路径处理	用于定义组件库内图片类地址等
theme (主题配置类)	styles	组件主题配置文件夹	包含大部分组件主题配置	用于每个组件单独主题配置
	theme	FNTheme	主题配置主文件	main文件入口引用
third_lib (第三方依赖类)	auto_size_text	-	文本自动大小组件，支持根据宽度自适应文本字体大小	用于特殊文本字体大小适配展示场景
	pin_code_fields	-	验证码输入组件，支持验证码输入、自动填充等	用于登录、注册等验证码输入场景
	pull_to_refresh	-	列表刷新组件，支持头部、底部自定义	用于列表组件刷新场景
	visibility_detector	-	可见区域检测组件，支持视图的可见状态检测	用于路由切换、页面切换、前后台切换场景检测
context (上下文类)	context	FNDesignContext	上下文配置入口，主要用于为弹框类提供上下文；提供了两种初始化的方法：initFNUIKitContext、FNUIKitContextBuilder	程序主入口进行初始化