Flutter（35）：Material组件之Stepper

Flutter教学目录持续更新中

Github源代码持续更新中

1.Stepper介绍

步骤指示器，显示一系列步骤的过程

2.Stepper属性

• steps：List
• physics：控制用户滚动视图的交互
  • AlwaysScrollableScrollPhysics:列表总是可滚动的。在iOS上会有回弹效果，在android上不会回弹。
  • PageScrollPhysics：一般是给PageView控件用的滑动效果。如果listview设置的话在滑动到末尾时会有个比较大的弹起和回弹
  • ClampingScrollPhysics：滚动时没有回弹效果，同android系统的listview效果
  • NeverScrollableScrollPhysics：就算内容超过列表范围也不会滑动
  • BouncingScrollPhysics：不论什么平台都会有回弹效果
• type = StepperType.vertical：
• currentStep = 0：
• onStepTapped：点击
• onStepContinue：下一个
• onStepCancel：取消
• controlsBuilder：自定义控制器

3.Step属性

• title：标题
• subtitle：副标题
• content：内容
• state = StepState.indexed：状态
• isActive = false：是否高亮

4.注意事项

• Stepper的父节点不能是一个无法确定高度（或者宽度）的组件，这个取决于Stepper的方向
• 自定义控制器返回的widget代替的是继续取消按钮，但是不接受返回null

5.Stepper

1601808454(1).png

class _StepperPageState extends State {
  var _currentStep = 0;
  List _widgetList = [];

  _myStepper() {
    return Stepper(
      steps: _getStepList(),
      physics: AlwaysScrollableScrollPhysics(),
      type: StepperType.vertical,
      currentStep: _currentStep,
      onStepTapped: (index) {
        print('onStepTapped index = $index');
        setState(() {
          _currentStep = index;
        });
      },
      onStepContinue: () {
        print('onStepContinue');
        setState(() {
          if (_currentStep < _widgetList.length - 1) {
            _currentStep++;
          }
        });
      },
      onStepCancel: () {
        print('onStepCancel');
        setState(() {
          if (_currentStep > 0) {
            _currentStep--;
          }
        });
      },
    );
  }

  _myStep(int i) {
    return Step(
      title: Text('Step title$i'),
      subtitle: Text('Step subtitle$i'),
      content: Text('Step content$i'),
      state: _getStepState(i),
      isActive: _currentStep == i ? true : false,
    );
  }

  _getStepState(int i) {
    switch (i) {
      case 1:
        return StepState.editing;
      case 2:
        return StepState.disabled;
      case 3:
        return StepState.complete;
      case 4:
        return StepState.error;
      default:
        return StepState.indexed;
    }
  }

  _getStepList() {
    _widgetList.clear();
    for (var i = 0; i < 10; i++) {
      _widgetList.add(_myStep(i));
    }
    return _widgetList;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stepper'),
      ),
      body: _myStepper(),
    );
  }
}

6.自定义控制器

如果不想要按钮可以直接返回空的Container

1601808604(1).png

      controlsBuilder: (BuildContext context,
          {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
        return Row(
          children: [
            RaisedButton(
              child: Text('上一步'),
              onPressed: onStepCancel,
            ),
            RaisedButton(
              child: Text('下一步'),
              onPressed: onStepContinue,
            ),
          ],
        );
        return Container();
      },

7.横向

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

1601808720(1).png

      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Container(
          color: Colors.grey,
          width: 2000,
          height: 200,
          child: _myStepper(),
        ),
      ),

下一节：Cupertino组件之CupertinoActivityIndicator

Flutter（36）：Cupertino组件之CupertinoActivityIndicator

Flutter教学目录持续更新中

Github源代码持续更新中