首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >创建带有滑块按钮的分段控制小部件-颤动

创建带有滑块按钮的分段控制小部件-颤动
EN

Stack Overflow用户
提问于 2019-10-06 04:47:27
回答 2查看 9.4K关注 0票数 8

如何创建与此类似的内容?:

演示:

我知道flutter有

代码语言:javascript
复制
CupertinoSegmentedControl()

但这创造了一些类似于标签的东西,没有什么能像里面有按钮的开关那样滑动。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-03-02 07:16:21

我找到的最好的东西是CupertinoSlidingSegmentedControl()

代码语言:javascript
复制
class _ViewState extends State<View> {
  int segmentedControlGroupValue = 0;
  final Map<int, Widget> myTabs = const <int, Widget>{
    0: Text("Item 1"),
    1: Text("Item 2")
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CupertinoSlidingSegmentedControl(
          groupValue: segmentedControlGroupValue,
          children: myTabs,
          onValueChanged: (i) {
            setState(() {
              segmentedControlGroupValue = i;
            });
          }),
    );
  }
}

希望这能有所帮助。请参阅文档here

票数 24
EN

Stack Overflow用户

发布于 2020-10-08 19:32:32

我建议使用CupertinoSlidingSegmentedControl Widget来获得上面这样的输出

CupertinoSlidingSegmentedControl小工具是iOS13风格的分段控件。它将以水平列表的形式显示childrenMap列表中提供的小部件。用于在多个互斥选项之间进行选择。当选择分段控件中的一个选项时,分段控件中的其他选项停止被选择。

分段控件可以任选地用自定义颜色创建。可以使用thumbColorbackgroundColor和参数覆盖分段控件的默认颜色。

创建优雅的分段控件,遵循以下代码

代码语言:javascript
复制
import 'package:flutter/cupertino.dart';

 class SegmentedControl extends StatefulWidget {
   @override
   _SegmentedControlState createState() => _SegmentedControlState();
 }

class _SegmentedControlState extends State<SegmentedControl> {

  int segmentedControlValue = 0;

  Widget segmentedControl() {
    return Container(
      width: 300,
      child: CupertinoSlidingSegmentedControl(
          groupValue: segmentedControlValue,
          backgroundColor: Colors.blue.shade200,
          children: const <int, Widget>{
            0: Text('One'),
            1: Text('Two'),
            2: Text('Three')
          },
          onValueChanged: (value) {
            setState(() {
              segmentedControlValue = value;
            });
          }
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Segmented Control")),
      body: Padding(
        padding: const EdgeInsets.only(top: 30.0, left: 50),
        child: segmentedControl(),
      ),
    );
  }

}

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58252223

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档