Flutter - 控件之 Switch、slider、SegmentedControl

控件效果預覽

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;
              });
            },
          ),
        ],
      );
    }

CupertinoSwitch

1、iOS風格開關CupertinoSwitch，相關屬性解析：

	const CupertinoSwitch({
        Key key,
        @required this.value, //開關當前狀態值，true或false
        @required this.onChanged, //用戶切換開關時調用
        this.activeColor, //開關打開時顏色
        this.dragStartBehavior = DragStartBehavior.start,
        })

2、代碼示例：

    Widget _buildCupertinoSwitch() {
      return Wrap(
        children: <Widget>[
          CupertinoSwitch(
            value: switchValue4,
            onChanged: (value) {
              print("value = $value");
              setState(() {
                switchValue4 = value;
              });
            },
          ),
          CupertinoSwitch(
            activeColor: Colors.red,
            value: switchValue5,
            onChanged: (value) {
              print("value5 = $value");
              setState(() {
                switchValue5 = value;
              });
            },
          ),
        ],
      );
    }

Slider

滑塊控件。

Slider

1、Material風格滑塊控件Slider，相關屬性解析：

	const Slider({
        Key key,
        @required this.value, //滑塊當前位置值
        @required this.onChanged, //拖動滑塊過程中持續調用
        this.onChangeStart, //滑動開始值
        this.onChangeEnd, //滑動結束值
        this.min = 0.0, //可選最小值
        this.max = 1.0, //可選最大值
        this.divisions, //分段
        this.label, //當滑塊滑動時，在滑塊上方顯示的標籤。
        this.activeColor, //滑塊及左側軌道顏色
        this.inactiveColor, //右側軌道顏色
        this.semanticFormatterCallback,
        })

2、代碼示例：

    Widget _buildSlider() {
      return Wrap(
        children: <Widget>[
          Slider(
            value: sliderValue,
            onChanged: (value) {
              print("slider value1 = $value");
              //slider value1 = 0.5019047328404018
              setState(() {
                sliderValue = value;
              });
            },
          ),
          Slider(
            value: sliderValue1,
            max: 1.0,
            min: 0.0,
            activeColor: Colors.red,
            inactiveColor: Colors.blue.withAlpha(50),
            divisions: 4,
            label: "${sliderValue1 / 1}",
            semanticFormatterCallback: (value) {
              return '$sliderValue1 dollars';
            },
            onChanged: (value) {
              setState(() {
                sliderValue1 = value;
              });
            },
            onChangeStart: (value) {
              print("onChange Start = $value");
            },
            onChangeEnd: (value) {
              print("onChange End = $value");
            },
          ),
        ],
      );
    }

CupertinoSlider

1、iOS風格滑塊CupertinoSlider，相關屬性解析：

const CupertinoSlider({
        Key key,
        @required this.value, //滑塊當前位置值
        @required this.onChanged, //拖動滑塊過程中持續調用
        this.onChangeStart, //開始滑動滑塊的值
        this.onChangeEnd, //滑動結束值
        this.min = 0.0, //可選最小值
        this.max = 1.0, //可選最大值
        this.divisions, //分段滑動
        this.activeColor, //滑塊條顏色
        })

2、代碼示例：

    Widget _buildCupertinoSlider() {
      return Wrap(
        children: <Widget>[
          CupertinoSlider(
            value: sliderValue2,
            onChanged: (value) {
              setState(() {
                sliderValue2 = value;
              });
            },
          ),
          CupertinoSlider(
            value: sliderValue3,
            min: 1,
            max: 1000,
            divisions: 5,
            activeColor: Colors.red,
            onChanged: (value) {
              setState(() {
                sliderValue3 = value;
              });
            },
            onChangeStart: (value) {},
            onChangeEnd: (value) {},
          ),
        ],
      );
    }

CupertinoSegmentedControl

1、iOS風格分段控件CupertinoSegmentedControl，相關屬性解析:

CupertinoSegmentedControl({
        Key key,
        @required this.children, //有序的Map，
        @required this.onValueChanged, //切換爲不同的item時調用, 返回值value是children中對應鍵值
        this.groupValue, //選中小部件的value值， children中對應的key值
        this.unselectedColor, //未選中小部件的背景色，以及選中小部件的文本顏色。
        this.selectedColor, //選中部件的背景色，以及未選定小部件的文本顏色。
        this.borderColor, //小部件邊框顏色
        this.pressedColor, //按下時背景色
        })

2、代碼示例：

    Widget _buildCupertinoSegmentedControl() {
      return Wrap(
        spacing: 10,
        runSpacing: 10,
        children: <Widget>[
          CupertinoSegmentedControl(
            groupValue: segmentedControlValue1,
            children: {
              1: Padding(
                padding: EdgeInsets.only(left: 20, right: 20),
                child: Text("粉絲"),
              ),
              2: Text("關注"),
              3: Text("好友"),
            },
            onValueChanged: (value) {
              print("CupertinoSegmentedControl value = $value");
              setState(() {
                segmentedControlValue1 = value;
              });
            },
          ),
          CupertinoSegmentedControl(
            selectedColor: Colors.red,
            unselectedColor: Colors.white,
            borderColor: Colors.purple,
            pressedColor: Colors.yellow,
            groupValue: segmentedControlValue,
            children: {
              1: Padding(
                padding: EdgeInsets.only(left: 20, right: 20),
                child: Text("全部"),
              ),
              2: Text("已完成"),
              3: Text("未完成"),
            },
            onValueChanged: (value) {
              print("CupertinoSegmentedControl value = $value");
              setState(() {
                segmentedControlValue = value;
              });
            },
          ),
          _buildContainer(segmentedControlValue),
        ],
      );
    }