Flutter CupertinoSegmentedControl


简介

IOS风格下用于展示一些用户可以选择的选项

将来自CupertinoSegmentedControl的child属性的Map列表中的组件, 以水平的方式展开供用户选择.这些选择是互斥的. 用户只能选择一个.

基本用法

这个组件的重点属性在于他的child属性

在官方文档中, 它的child属性是一个Map<T,Widget>对象. 这个对象的K可以是任意对象, String/Int/Widget/Array..., 这里的T值会在每次用户点击的时候. 触发onValueChanged 回调, 整个组件的高度, 取决于Map列表中Widget中最高的. 整个组件的宽度, 取决于Map列表中widget中最宽的 * Map的长度.样式支持用户自定义.

实例演示

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CupertinoSegmentedControlDemo extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State<CupertinoSegmentedControlDemo> {
  String value = 'a';
  Widget build(BuildContext context) {
    return  CupertinoSegmentedControl(
      onValueChanged: (v) {
        this.setState(() {
           value = v;
        });
      },
      pressedColor: Color(0xff7c1c25),
      borderColor: Color(0xffac172a),
      selectedColor: Color(0xffac172a),
      groupValue: value,
      children: {
        'a': Container(
          alignment: Alignment.center,
          width: 130.0,
          child: Text('a')
        ),
        'c': Text('C'),
        'b': Text('B'),
      },
    );
  }
}