Flutter 121: 图解简易 Slider 滑动条

Posted 2023-04-04

参考技术A

    小菜在业务开发过程中会自定义 Slider 滑动条，而在自定义之前，小菜先简单了解一下 Flutter 自带的 Slider ；

    简单分析源码可得， Slider 是一个有状态的 StatefulWidget 组件，属性也很清晰易懂，其中滑动过程中对应的 value 值和 onChanged 回调是必须参数；

     value 未滑动过程中对应的值，在 min 和 max 之间； onChanged 是在滑动过程中回调，当 onChanged 为 null 或 value 所在的 min 和 max 集合范围为空时， Slider 禁止滑动；

     min 和 max 为滑动条范围，而 value 的取值范围是在 min 和 max 之间，无论 value 为正还是负，均需要在 min 和 max 之间；

     activeColor 为滑动条已滑动过的颜色； inactiveColor 为滑动条中未滑动的颜色；两者均可以在 SliderTheme 中设置；

     label 为滑动条滑动到某一节点的标签文案； divisions 是把 min 和 max 等分为 divisions 份数；只有在 divisions 生效时， label 才会展示；

     onChangeStart 和 onChangeEnd 分别对应滑动过程中 value 值何时开始更改或何时完成更改时对应的回调；

     Slider 的主题效果可以通过 SliderTheme 或 ThemeData.sliderTheme 中获取更新，相较于 Slider 只提供已滑动和未滑动颜色效果，属性粒度更细；

     activeTrackColor 和 inactiveTrackColor 分别对应 Slider 已滑动过和未滑动过的轨道颜色；

     thumbColor 对应滑动按钮颜色，而 overlayColor 对应滑动按钮映射的叠层颜色，通常设置为半透明状态； overlayShape 对应叠层样式；

     valueIndicatorColor 对应 label 气泡颜色； valueIndicatorShape 对应气泡内文字属性； valueIndicatorShape 对应气泡样式，可以再此进行自定义气泡；

     activeTickMarkColor 对应已选中刻度颜色； inactiveTickMarkColor 对应未选中刻度颜色； tickMarkShape 对应刻度样式；

     trackHeight 为 Slider 轨道高度； trackShape 对应轨道样式，主要再此处进行自定义样式；

    对于不可滑动状态， SliderThemeData 提供了对应属性；

     Slider 案例源码

    小菜本节暂未涉及自定义滑动条样式，对于底层的 Slider 了解还不够深入；如有错误，请多多指导！

iOS 设备中 Flutter TabBarView 覆盖底部区域（Slider）

【中文标题】iOS 设备中 Flutter TabBarView 覆盖底部区域（Slider）

【英文标题】：Flutter TabBarView cover bottom area (Slider) in iOS device

【发布时间】：2019-11-28 12:50:29

【问题描述】：

我在 Flutter 中比较新，我像这样写了简单的 TabBarView。

class MyApp extends StatelessWidget 
  @override
   Widget build(BuildContext context) 
    return new MaterialApp(
       theme: ThemeData(
        primaryColor: HexColor("#2E58A1"),
      ), 
      home: DefaultTabController(
        length: 4,
        child: new Scaffold(
          body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            children: [
              new Page1(),
              new Page2(),
              new Page3(),
              new Container(
                color: Colors.red,
              ),
            ],
          ),
          bottomNavigationBar: new TabBar(
            tabs: [
              Tab(
                icon: new Icon(Icons.home),
              ),
              Tab(
                icon: new Icon(Icons.rss_feed),
              ),
              Tab(
                icon: new Icon(Icons.perm_identity),
              ),
              Tab(icon: new Icon(Icons.settings),)
            ],
            labelColor: HexColor("#2E58A1"),
            unselectedLabelColor: HexColor("#CBCCCD"),
            indicatorSize: TabBarIndicatorSize.label,
            indicatorPadding: EdgeInsets.all(5.0),
            indicatorColor: HexColor("#2E58A1"),
          ),
          backgroundColor: Colors.white,
        ),
      ),
    );
  

在原生 iOS 应用程序中，它不会像这样重叠标签栏和滑块。

我应该如何重写我的代码？

【问题讨论】：

在颤振 Scaffold 本身提供的 bottomNavigationBar 接受一个小部件，查看一些教程。 willowtreeapps.com/ideas/…

【参考方案1】：

用 SafeArea 小部件包装您的 MaterialApp。

或者你可以用 SafeArea

包裹你的

TabBar

class MyApp extends StatelessWidget 
  @override
    Widget build(BuildContext context) 
    return new MaterialApp(
      theme: ThemeData(),
      home: SafeArea(
        child: DefaultTabController(
          length: 4,
          child: new Scaffold(
            body: TabBarView(
              physics: NeverScrollableScrollPhysics(),
              children: [
                new Page1(),
                new Page2(),
                new Page3(),
                new Container(
                  color: Colors.red,
                ),
              ],
            ),
            bottomNavigationBar: new TabBar(
              tabs: [
                Tab(
                  icon: new Icon(Icons.home),
                ),
                Tab(
                  icon: new Icon(Icons.rss_feed),
                ),
                Tab(
                  icon: new Icon(Icons.perm_identity),
                ),
                Tab(
                  icon: new Icon(Icons.settings),
                )
              ],
              labelColor: HexColor("#2E58A1"),
              unselectedLabelColor: HexColor("#CBCCCD"),
              indicatorSize: TabBarIndicatorSize.label,
              indicatorPadding: EdgeInsets.all(5.0),
              indicatorColor: HexColor("#2E58A1"),
            ),
            backgroundColor: Colors.white,
          ),
        ),
      ),
    );
  

【讨论】：

渲染时出错。我该如何解决？我尝试用 MediaQuery 包装，但不行。 SafeArea 小部件需要 MediaQuery 小部件祖先。

尝试只用安全区域包裹你的标签栏

成功了！谢谢你。您能否更新您的答案以供将来参考？

【参考方案2】：

将您的小部件包装到 SafeArea 中，它会添加足够的填充以避免操作系统的入侵

也建议设置

BottomNavigationBar(
...
elevation: 0,

根据这份报告：https://github.com/flutter/flutter/issues/21688

【讨论】：

渲染时出错。我该如何解决？我尝试用 MediaQuery 包装，但不行。 SafeArea 小部件需要 MediaQuery 小部件祖先。