Flutter 分段器的使用

代码很简单,主要是使用CupertinoSegmentedControl这个组件, groupValue 参数是选中的元素,String value用于记录选中. onValueChanged是选中事件.嗯,就这样,没别的了.

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

class _Demo extends State<CupertinoSegmentedControlDemo> {
  String value = 'a';

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("分段器"),
      ),
      body: Container(
        padding: EdgeInsets.only(top: 10),
        child: Column(
          children: <Widget>[
            CupertinoSegmentedControl(
              onValueChanged: (v) {
                this.setState(() {
                  value = v;
                });
              },
              pressedColor: Color(0xff7c1c25),
              borderColor: Color(0xffac172a),
              selectedColor: Color(0xffac172a),
              groupValue: value,
              children: {
                'a': Container(
                    alignment: Alignment.center,  130.0, child: Text('a')),
                'c': Text('C'),
                'b': Text('B'),
              },
            )
          ],
        ),
      )
    );
  }
}

效果图:

使用场景