Flutter 之 Stepper

Posted 2022-12-02 一叶飘舟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flutter 之 Stepper相关的知识，希望对你有一定的参考价值。

Stepper 是 flutter 提供的步骤选择器

1. Stepper

1.1 Stepper 介绍

Stepper 定义

  const Stepper(
    Key? key,
    required this.steps,
    this.physics,
    this.type = StepperType.vertical,
    this.currentStep = 0,
    this.onStepTapped,
    this.onStepContinue,
    this.onStepCancel,
    this.controlsBuilder,
    this.elevation,
    this.margin,
  )

Stepper 属性

Stepper 属性	介绍
steps	@required List<Step>
physics	滑动的物理效果
type	Stepper 类型，分为横向与纵向两种，默认为 StepperType.vertical
currentStep	当前 step，默认为 0
onStepTapped	step 点击回调函数
onStepContinue	Next 按钮点击回调函数
onStepCancel	Cancel 按钮点击回调函数
controlsBuilder	内容下方按钮构建函数
elevation	阴影仅在Stepper的type为横向时有效
margin	外边距仅在Stepper的type为垂直时有效

1.2 Step 介绍

Step 定义

  const Step(
    required this.title,
    this.subtitle,
    required this.content,
    this.state = StepState.indexed,
    this.isActive = false,
  )

Step 属性

Step 属性	介绍
title	@required 标题控件
subtitle	副标题控件
content	@required 内容控件
state	当前 step 的状态，StepState 会改变每一个 step 的图标，默认为 StepState.indexed
isActive	是否激活状态，默认为 false，isActive == true 时会变成蓝色

2. Stepper 示例

2.1 垂直方向Stepper


class MSStepperDemo extends StatefulWidget 
  const MSStepperDemo(Key? key) : super(key: key);

  @override
  State<MSStepperDemo> createState() => _MSStepperDemoState();


class _MSStepperDemoState extends State<MSStepperDemo> 
  List<MSStepModel> _datas = [];
  int _currentStep = 0;
  @override
  void initState() 
    _datas.add(MSStepModel(0, "第一步", "我们先进行第一步"));
    _datas.add(MSStepModel(1, "第二步", "我们先进行第二步"));
    _datas.add(MSStepModel(2, "第三步", "我们先进行第三步"));
    _datas.add(MSStepModel(3, "第四步", "我们先进行第四步"));
    _datas.add(MSStepModel(4, "第五步", "我们先进行第五步"));
    super.initState();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: Text("StepperDemo")),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Stepper(
          currentStep: _currentStep, // 当前步骤
          type: StepperType
              .vertical, // Stepper 类型，分为横向与纵向两种 默认StepperType.vertical
          steps: _getSteps(), // 步骤
          //margin: EdgeInsets.all(10), // 自定义外边距 仅在垂直方向 有效
          // 继续按钮点击回调函数
          onStepContinue: () 
            if (_currentStep < _datas.length - 1) 
              _currentStep++;
              setState(() );
            
          ,
          // step 点击回调函数
          onStepTapped: (index) 
            _currentStep = index;
            setState(() );
          ,
          onStepCancel: () 
            if (_currentStep > 0) 
              _currentStep--;
              setState(() );
            
          ,
        ),
      ),
    );
  

  List<Step> _getSteps() 
    List<Step> steps = [];
    _datas.forEach((element) 
      // 我们根据当前 step 进行区分，
      // 当前 step 之前的认为 StepState.complete，
      // 当前认为 StepState.editing，
      // 之后认为 StepState.indexed
      if (element.index < _currentStep) 
        element.state = StepState.complete;
       else if (element.index == _currentStep) 
        element.state = StepState.editing;
       else 
        element.state = StepState.indexed;
      
      steps.add(
        Step(
          // Step Title
          title: Row(
            children: [
              Icon(Icons.title),
              Text(element.title),
            ],
          ),
          // Step Content
          content: Text(element.content),
          // 是否激活状态，true 时会变成蓝色
          isActive: (_currentStep == _datas.indexOf(element)),
          state: element.state,
        ),
      );
    );
    return steps;
  


class MSStepModel 
  MSStepModel(this.index, this.title, this.content);
  int index;
  String title;
  String content;
  StepState state = StepState.indexed;

2.2 水平方向Stepper


class MSStepperDemo2 extends StatefulWidget 
  const MSStepperDemo2(Key? key) : super(key: key);

  @override
  State<MSStepperDemo2> createState() => _MSStepperDemo2State();


class _MSStepperDemo2State extends State<MSStepperDemo2> 
  List<MSStepModel> _datas = [];
  int _currentStep = 0;
  @override
  void initState() 
    _datas.add(MSStepModel(0, "第一步", "我们先进行第一步"));
    _datas.add(MSStepModel(1, "第二步", "我们先进行第二步"));
    _datas.add(MSStepModel(2, "第三步", "我们先进行第三步"));
    _datas.add(MSStepModel(3, "第四步", "我们先进行第四步"));
    _datas.add(MSStepModel(4, "第五步", "我们先进行第五步"));
    super.initState();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: Text("SteperDemo2")),
      body: Padding(
        padding: EdgeInsets.all(8),
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Container(
            width: 600,
            child: Stepper(
              currentStep: _currentStep, // 当前 Step
              steps: _getSteps(), // Steps
              type: StepperType.horizontal,
              onStepTapped: (index) 
                _currentStep = index;
                setState(() );
              ,
              onStepContinue: () 
                if (_currentStep < _datas.length - 1) 
                  _currentStep++;
                  setState(() );
                
              ,
              onStepCancel: () 
                if (_currentStep > 0) 
                  _currentStep--;
                  setState(() );
                
              ,
            ),
          ),
        ),
      ),
    );
  

  List<Step> _getSteps() 
    List<Step> steps = [];
    _datas.forEach((element) 
      if (element.index < _currentStep) 
        element.state = StepState.complete;
       else if (element.index == _currentStep) 
        element.state = StepState.editing;
       else 
        element.state = StepState.indexed;
      
      steps.add(
        Step(
          title: Row(
            children: [
              Icon(Icons.title),
              Text(element.title),
            ],
          ),
          content: Text(element.content),
          isActive:
              _currentStep == _datas.indexOf(element), // 是否激活状态，true 时会变成蓝色
          state: element.state, // Step Status
        ),
      );
    );
    return steps;
  


class MSStepModel 
  MSStepModel(this.index, this.title, this.content);
  int index;
  String title;
  String content;
  StepState state = StepState.indexed;

注意：横向的时候如果内容过多会溢出，这个是跟纵向有区别的，这时候要么减少内容，要么使用滑动组件嵌套，但还还需要嵌套一个已知宽度的父空间

2.3 controlsBuilder


class MSStepperDemo3 extends StatefulWidget 
  const MSStepperDemo3(Key? key) : super(key: key);

  @override
  State<MSStepperDemo3> createState() => _MSStepperDemo3State();


class _MSStepperDemo3State extends State<MSStepperDemo3> 
  List<MSStepModel> _datas = [];
  int _currentStep = 0;
  @override
  void initState() 
    _datas.add(MSStepModel(0, "第一步", "我们先进行第一步"));
    _datas.add(MSStepModel(1, "第二步", "我们先进行第二步"));
    _datas.add(MSStepModel(2, "第三步", "我们先进行第三步"));
    _datas.add(MSStepModel(3, "第四步", "我们先进行第四步"));
    _datas.add(MSStepModel(4, "第五步", "我们先进行第五步"));
    super.initState();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: Text("SteperDemo3")),
      body: Padding(
        padding: EdgeInsets.all(8),
        child: Stepper(
          currentStep: _currentStep, // 当前 Step
          steps: _getSteps(), // Steps
          type: StepperType.vertical,
          controlsBuilder: (ctx, details) 
            return Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                    onPressed: details.onStepContinue, child: Text("下一步")),
                SizedBox(width: 20),
                ElevatedButton(
                    onPressed: details.onStepCancel, child: Text("上一步")),
              ],
            );
          ,
          onStepTapped: (index) 
            _currentStep = index;
            setState(() );
          ,
          onStepContinue: () 
            if (_currentStep < _datas.length - 1) 
              _currentStep++;
              setState(() );
            
          ,
          onStepCancel: () 
            if (_currentStep > 0) 
              _currentStep--;
              setState(() );
            
          ,
        ),
      ),
    );
  

  List<Step> _getSteps() 
    List<Step> steps = [];
    _datas.forEach((element) 
      if (element.index < _currentStep) 
        element.state = StepState.complete;
       else if (element.index == _currentStep) 
        element.state = StepState.editing;
       else 
        element.state = StepState.indexed;
      
      steps.add(
        Step(
          title: Row(
            children: [
              Icon(Icons.title),
              Text(element.title),
            ],
          ),
          content: Text(element.content),
          isActive:
              _currentStep == _datas.indexOf(element), // 是否激活状态，true 时会变成蓝色
          state: element.state, // Step Status
        ),
      );
    );
    return steps;
  


class MSStepModel 
  MSStepModel(this.index, this.title, this.content);
  int index;
  String title;
  String content;
  StepState state = StepState.indexed;

3. 技术小结

第一步，我们既然要做一个 Stepper，我们要准备一套数据模型，并且模型包含了状态，标题，内容，下标，等各个元素，然后将这些数据构造出来当做数据源。
第二步，我们创建 Stepper，并对一些属性进行设置。
第三步，我们创建 steps，这里很重要，要根据我们第一步中的数据源，将每一个 model 构造成对应的 Step 控件。
第四步，我们在创建 steps 时，对 model 的状态进行管理，设置编辑中，已完成，未完成等不同状态。
第五步，我们对 Stepper 的交互事件进行处理，点击时将 currentStep 设置到对应 index，cancel 时我们执行 currentStep -1 操作，Next 时我们执行 currentStep +1 操作，此处注意防止越界。

作者：maskerII
链接：https://www.jianshu.com/p/d9e46a6f3e4c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

以上是关于Flutter 之 Stepper的主要内容，如果未能解决你的问题，请参考以下文章

Flutter Stepper - BoxConstraints 强制无限宽度

Flutter 基础控件之 Row 横向布局 Column 纵向布局

如何在 FLUTTER 的 stepper 中显示一个列表

组件之间传递数据。 flutter中在Stepper中传递数据

Flutter 自定义实现时间轴侧边进度条

UITableView 在从纵向旋转到横向再回到纵向时会更改大小