提交 45b10b5b authored 作者: Kevin's avatar Kevin

完善了键盘的文档

上级 e394b245
## [0.1.8] - TODO:完善了键盘的文档
* 完善了键盘的文档
* 完善了可发送的TextInputAction的类型
## [0.1.7] - TODO:添加了自定义键盘
* TODO:添加了自定义键盘
* TODO:修改了下文档结构
......
......@@ -7,7 +7,7 @@ Usage
Add this to your package's pubspec.yaml file:
``` yaml
dependencies:
cool_ui: "^0.1.7"
cool_ui: "^0.1.8"
```
# 控件
......@@ -22,4 +22,5 @@ dependencies:
# 自定义键盘
暂时未编写文档,具体请查看Demo与NumberKeyboard的实现
\ No newline at end of file
- [Get started](#自定义键盘使用方法快速入门)
- [KeyboardController](#KeyboardController)
\ No newline at end of file
# 自定义键盘使用方法快速入门
## Step1
编写个性化的键盘
```dart
class NumberKeyboard extends StatelessWidget{
static const CKTextInputType inputType = const CKTextInputType(name:'CKNumberKeyboard'); //定义InputType类型
static double getHeight(BuildContext ctx){ //编写获取高度的方法
...
}
final KeyboardController controller ; //用于控制键盘输出的Controller
const NumberKeyboard({this.controller});
static register(){ //注册键盘的方法
CoolKeyboard.addKeyboard(NumberKeyboard.inputType,KeyboardConfig(builder: (context,controller){
return NumberKeyboard(controller: controller);
},getHeight: NumberKeyboard.getHeight));
}
@override
Widget build(BuildContext context) { //键盘的具体内容
...
return Container( //例子
color: Colors.white,
child: GestureDetector(
behavior: HitTestBehavior.translucent,
child: Center(child: Text('1'),),
onTap: (){
controller.addText('1'); 往输入框光标位置添加一个1
},
),
)
}
}
```
## Step2
注册键盘
```dart
void main(){
NumberKeyboard.register(); //注册键盘
runApp(MyApp());
}
```
## Step3
给需要使用自定义键盘的页面添加以下代码
```dart
@override
Widget build(BuildContext context) {
return KeyboardMediaQuery(//用于键盘弹出的时候页面可以滚动到输入框的位置
child: Builder(builder: (ctx) {
CoolKeyboard.init(ctx); //初始化键盘监听并且传递当前页面的context
return Page; //返回当前页面
})
);
}
```
## Step4
具体使用
```dart
TextField(
...
keyboardType: NumberKeyboard.inputType, 像平常一样设置键盘输入类型一样将Step2编写的inputType传递进去
...
)
```
# KeyboardController
- [deleteOne](#deleteOne)
- [addText](#addText)
- [doneAction](#doneAction)
- [nextAction](#nextAction)
- [sendPerformAction](#sendPerformAction)
### deleteOne()
删除一个字符,一般用于键盘的删除键
### addText(String insertText)
在光标位置添加文字,一般用于键盘输入
### doneAction()
触发键盘的完成Action
### nextAction()
触发键盘的下一项Action
### newLineAction()
触发键盘的换行Action
### sendPerformAction(TextInputAction action)
///发送其他Action
......@@ -159,7 +159,6 @@ VoidCallback showWeuiToast({
Alignment alignment = const Alignment(0.0,-0.2),
RouteTransitionsBuilder transitionBuilder}){
Completer<VoidCallback> result = Completer<VoidCallback>();
Navigator.of(context,rootNavigator: true).push(
WeuiToast(
alignment: alignment,
......
......@@ -60,7 +60,7 @@ class KeyboardController extends ValueNotifier<TextEditingValue>{
clearComposing() {
value = value.copyWith(composing: TextRange.empty);
}
///删除一个字符,一般用于键盘的删除键
deleteOne(){
if(selection.baseOffset == 0)
return;
......@@ -101,4 +101,18 @@ class KeyboardController extends ValueNotifier<TextEditingValue>{
CoolKeyboard.sendPerformAction(TextInputAction.done);
}
/// 下一个
nextAction(){
CoolKeyboard.sendPerformAction(TextInputAction.next);
}
/// 换行
newLineAction(){
CoolKeyboard.sendPerformAction(TextInputAction.newline);
}
///发送其他Action
sendPerformAction(TextInputAction action){
CoolKeyboard.sendPerformAction(action);
}
}
\ No newline at end of file
name: cool_ui
description: 用flutter实现一些我认为好看的UI控件,目前暂时只有Popover,Weui,不过有什么觉得好看的可以提Issue
version: 0.1.7
description: 用flutter实现一些我认为好看的UI控件,目前暂时只有Popover,Weui,Custom Keyboard,不过有什么觉得好看的可以提Issue
version: 0.1.8
author: Kevin <liangkaikevin@gmail.com>
homepage: https://github.com/Im-Kevin/cool_ui
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论