Flex 4:具有滑块和文本框组合

Posted

技术标签:

【中文标题】Flex 4:具有滑块和文本框组合【英文标题】:Flex 4: Having slider and textbox combo 【发布时间】:2011-09-27 09:19:30 【问题描述】:

在一个 flex 项目中,我在表单上有一个滑块和文本框,我使用滑块(为了方便)或文本输入(为了精确数字)来寻找用户输入。根据用户对其中任何一个的输入,我通过附加的侦听器更新另一个,该侦听器调用相关函数

slider.addEventListener("change",sliderUpdate);
textIn.addEventListener("change",valueUpdate);

我在使用 textinput 时遇到问题,它不允许我键入十进制数字 - 这可能是因为我有一个侦听器正在为 textinput 中的每次击键增加滑块,因此无法接受一种 ”。”。例如.05, .1, .00003

如何解决这个问题 - 我可以让 textinput 侦听器保持延迟,直到我可以按 Enter 来指示我完成了吗?

【问题讨论】:

【参考方案1】:

这对我有用:

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">    
        <fx:Script>
        <![CDATA[
            import spark.events.TextOperationEvent;

            protected function sliderUpdate(event:Event):void
            
                textIn.text=slider.value.toString();
            

            protected function valueUpdate(event:TextOperationEvent):void
            
                slider.value=Number(textIn.text);
            
        ]]>
        </fx:Script>
        <s:HSlider id="slider" x="10" y="106"  change="sliderUpdate(event)" maximum="100.0" minimum="0.0" stepSize="0.01"/>
        <s:TextInput id="textIn" x="10" y="76"  change="valueUpdate(event)" text="0"/>
    </s:Application>

滑块的步长值为0.01;如果您在文本字段中输入值,滑块应该会自动更新。

编辑:

然后在 TextInput 上,您应该监听 keyDown 事件 (KeyboardEvent.KEY_DOWN),该函数应该检查按下的键是否为 ENTER,然后更新滑块:

<s:TextInput id="textIn" x="10" y="76"  keyDown="textIn_keyDownHandler(event)" text="0"/>

功能:

    protected function textIn_keyDownHandler(event:KeyboardEvent):void
    
        if (event.keyCode == Keyboard.ENTER)
        
            slider.value=Number(textIn.text);
        
    

如果您更喜欢使用 addEventListener,应该这样做:

textIn.addEventListener(KeyboardEvent.KEY_DOWN, textIn_keyDownHandler);

【讨论】:

我澄清了小数点是什么意思的问题。出于商业原因,我需要滑块具有不同的捕捉值,该值以更高的增量出现。我的挑战不适用于 6.01、2.005 等对我有用 - 挑战 .009、, ,045 等 - 它不允许使用“。”当滑块尝试为每次击键更新时 感谢您的解决方案,但为什么即使我更新了 values 数组,使用两个拇指也不起作用?

以上是关于Flex 4:具有滑块和文本框组合的主要内容,如果未能解决你的问题,请参考以下文章

在堆栈面板中拉伸文本块和文本框

将数据从文本框获取到属性,该属性从滑块接收其文本(初学者问题)

如何取消选择具有下拉样式的组合框中的文本?

Flex - 通过文本输入搜索/过滤 DataGrid

Flex 动态组件运行时创建

根据在Flex中文本区域输入的用户输入文本过滤/搜索Array Collection的列表框