feat:input align the affect to android

This commit is contained in:
pengfei.zhou
2020-05-06 15:11:57 +08:00
committed by osborn
parent 931c06393e
commit 112952d379
3 changed files with 125 additions and 66 deletions

View File

@@ -1,5 +1,33 @@
import { Panel, Group, scroller, vlayout, layoutConfig, LayoutSpec, Input, Gravity, log } from "doric";
import { Panel, Group, scroller, vlayout, layoutConfig, LayoutSpec, Input, Gravity, log, Color, input, text } from "doric";
import { title, colors } from "./utils";
function getInput(c: Partial<Input>) {
const inputView = input(c)
const isFocused = text({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
},
height: 50,
})
const inputed = text({
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
},
height: 50,
})
inputView.onFocusChange = (onFocusChange) => {
isFocused.text = onFocusChange ? `Focused` : `Unfocused`
}
inputView.onTextChange = (text) => {
inputed.text = `Inputed:${text}`
}
return [inputView, isFocused, inputed]
}
@Entry
class InputDemo extends Panel {
build(root: Group) {
@@ -8,33 +36,34 @@ class InputDemo extends Panel {
[
title("Demo"),
(new Input).also(it => {
it.layoutConfig = layoutConfig().just().configHeight(LayoutSpec.FIT)
it.width = 300
it.maxLength=10;
it.multiline = false
it.hintText = "HintText"
it.textAlignment = Gravity.Left
it.onTextChange = (s) => {
log(`onTextChange:${s}`)
}
it.onFocusChange = (f) => {
log(`onFocusChange:${f}`)
}
}),
(new Input).also(it => {
it.layoutConfig = layoutConfig().fit()
it.hintText = "HintText"
it.hintTextColor = colors[2]
it.textAlignment = Gravity.Left
it.textColor = colors[3]
it.onTextChange = (s) => {
log(`onTextChange:${s}`)
}
it.onFocusChange = (f) => {
log(`onFocusChange:${f}`)
}
it.backgroundColor = colors[1].alpha(0.3)
// ...getInput({
// layoutConfig: {
// widthSpec: LayoutSpec.JUST,
// heightSpec: LayoutSpec.FIT,
// },
// width: 300,
// hintText: "Please input something",
// border: {
// width: 1,
// color: Color.GRAY,
// },
// textSize: 40,
// maxLength: 20,
// }),
...getInput({
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
},
hintText: "Please input something in one line",
border: {
width: 1,
color: Color.GRAY,
},
multiline: false,
textSize: 20,
maxLength: 20,
padding: { top: 10, bottom: 11 }
}),
],
{