举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > SwitchAndroid

SwitchAndroid

2023-05-13 10:18 SwitchAndroid

 SwitchAndroid

标准的 Android 双态切换组件

属性

disable bool

如果为 true,则该组件不能进行交互。

onValueChange function

当值发生变化时调用新的值。

testID string

用于在端到端测试中查找此视图。

value bool

开关的布尔值。

其他属性:

android:showText:设置on/off的时候是否显示文字,boolean 

android:splitTrack:是否设置一个间隙,让滑块与底部图片分隔,boolean 

android:switchMinWidth:设置开关的最小宽度 

android:switchPadding:设置滑块内文字的间隔 

android:switchTextAppearance:设置开关的文字外观,暂时没发现有什么用… 

android:textOff:按钮没有被选中时显示的文字 

android:textOn:按钮被选中时显示的文字 

android:textStyle:文字风格,粗体,斜体写划线那些 

android:track:底部的图片 

android:thumb:滑块的图片 


例子

    'use strict';

    var React = require('React');

    var SwitchAndroid = require('SwitchAndroid');
    var Text = require('Text');
    var UIExplorerBlock = require('UIExplorerBlock');
    var UIExplorerPage = require('UIExplorerPage');

    var SwitchAndroidExample = React.createClass({
      statics: {
        title: '<SwitchAndroid>',
        description: 'Standard Android two-state toggle component'
      },

      getInitialState : function() {        return {
          trueSwitchIsOn: true,
          falseSwitchIsOn: false,
          colorTrueSwitchIsOn: true,
          colorFalseSwitchIsOn: false,
          eventSwitchIsOn: false,
        };
      },

      render: function() {        return (
          <UIExplorerPage title="<SwitchAndroid>">
            <UIExplorerBlock title="Switches can be set to true or false">
              <SwitchAndroid
                onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
                style={{marginBottom: 10}}
                value={this.state.falseSwitchIsOn} />
              <SwitchAndroid
                onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
                value={this.state.trueSwitchIsOn} />
            </UIExplorerBlock>
            <UIExplorerBlock title="Switches can be disabled">
              <SwitchAndroid
                disabled={true}
                style={{marginBottom: 10}}
                value={true} />
              <SwitchAndroid
                disabled={true}
                value={false} />
           </UIExplorerBlock>
           <UIExplorerBlock title="Change events can be detected">
             <SwitchAndroid
               onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
               style={{marginBottom: 10}}
               value={this.state.eventSwitchIsOn} />
             <SwitchAndroid
               onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
               style={{marginBottom: 10}}
               value={this.state.eventSwitchIsOn} />
             <Text>{this.state.eventSwitchIsOn ? "On" : "Off"}</Text>
          </UIExplorerBlock>
          <UIExplorerBlock title="Switches are controlled components">
            <SwitchAndroid />
            <SwitchAndroid value={true} />
          </UIExplorerBlock>
        </UIExplorerPage>
       );
     }
    });

    module.exports = SwitchAndroidExample;


阅读全文
以上是编程学为你收集整理的 SwitchAndroid全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部