Flutter 分段控制组件

最新推荐文章于 2025-01-04 14:21:00 发布

xiangxiongfly915

最新推荐文章于 2025-01-04 14:21:00 发布

阅读量922

点赞数

分类专栏： Flutter 文章标签： flutter 分段控制组件

本文链接：https://blog.csdn.net/qq_14876133/article/details/125138815

版权

Flutter 专栏收录该内容

53 篇文章

订阅专栏

文章目录

Flutter 分段控制组件

Flutter 分段控制组件

CupertinoSegmentedControl

CupertinoSegmentedControl是iOS风格的分段控制组件。

基本使用

在这里插入图片描述

String? _value = "语文";

CupertinoSegmentedControl(
  children: {
    "语文": Container(
      child: const Text("语文"),
      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
    ),
    "数学": Container(
      child: const Text("数学"),
      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
    ),
    "外语": Container(
      child: const Text("外语"),
      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
    ),
  },
  //默认选中
  groupValue: _value,
  onValueChanged: (value) {
    setState(() {
      _value = value as String?;
    });
  },
),

其他使用方法

在这里插入图片描述

String? _value2 = "数学";

CupertinoSegmentedControl(
  children: {
    "语文": Container(
      child: const Text("语文"),
      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
    ),
    "数学": Container(
      child: const Text("数学"),
      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
    ),
    "外语": Container(
      child: const Text("外语"),
      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
    ),
  },
  //选中（选中的背景颜色，未选中的文字颜色）
  selectedColor: Colors.red,
  //未选中（未选中的背景颜色，选中的文字颜色）
  unselectedColor: Colors.white,
  //按下
  pressedColor: Colors.red[50],
  //边框颜色
  borderColor: Colors.black,
  groupValue: _value2,
  onValueChanged: (value) {
    setState(() {
      _value2 = value as String?;
    });
  },
),

CupertinoSlidingSegmentedControl

iOS风格的分段滑动组件。

在这里插入图片描述

String? _value3 = "语文";

CupertinoSlidingSegmentedControl(
  children: {
    '语文': Container(
      child: const Text('语文'),
      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
    ),
    '数学': Container(
      child: const Text('数学'),
      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
    ),
    '体育': Container(
      child: const Text('体育'),
      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
    )
  },
  groupValue: _value3,
  onValueChanged: (value) {
    setState(() {
      _value3 = value as String?;
    });
  },
),