Flutter - 控件之 Switch、slider、SegmentedControl

最新推荐文章于 2024-06-24 07:31:02 发布

平子~~

最新推荐文章于 2024-06-24 07:31:02 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/iOS_PING/article/details/102523796

版权

这篇博客介绍了Flutter中三种UI控件的使用：Switch包括Material和Cupertino风格，Slider同样展示了两种风格，以及CupertinoSegmentedControl。详细解析了各控件的属性，并提供了代码示例。

摘要由CSDN通过智能技术生成

Flutter - 控件之 Switch、slider、SegmentedControl

控件效果预览
Switch
- Switch
- CupertinoSwitch
Slider
- Slider
- CupertinoSlider
CupertinoSegmentedControl

控件效果预览

在这里插入图片描述

Switch

开关控件。

Switch

1、Material 风格开关控件Switch,相关属性解析：

      const Switch({
   
        Key key,
        @required this.value, //开关当前状态值，true或false
        @required this.onChanged, //用户切换开关时调用
        this.activeColor, //开关打开时颜色,圆圈部分
        this.activeTrackColor, //打开时，轨道颜色
        this.inactiveThumbColor, //开发关闭时颜色，圆圈部分
        this.inactiveTrackColor, //关闭时，轨道颜色
        this.activeThumbImage, //打开时自定义图片，圆圈部分
        this.inactiveThumbImage, //关闭时图片，圆圈部分
        this.materialTapTargetSize,
        this.dragStartBehavior = DragStartBehavior.start,
        })

2、代码示例：

    Widget _buildSwitch() {
   
      return Wrap(
        children: <Widget>[
          Switch(
            value: switchValue1,
            onChanged: (value) {
   
              setState(() {
   
                switchValue1 = value;
              });
            },
          ),
          Switch(
            value: switchValue2,
            activeColor: Colors.green,
            inactiveThumbColor: Colors.grey,
            activeTrackColor: Colors.lightGreen,
            inactiveTrackColor: Colors.grey,
            onChanged: (value) {
   
              setState(() {
   
                switchValue2 = value;
              });
            },
          ),
          Switch(
            value: switchValue3,
            activeThumbImage: Image.asset("images/user_menu_01.png").image,
            inactiveThumbImage:
                Image.asset("images/forum_heart_icon.png").image,
            onChanged: (value) {
   
              print("value3 = $value");
              setState(() {
   
                switchValue3 = value