从材料指南实施“移动步骤进度条”

Question

材料设计指南过去有一个关于步进器的部分：https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps。这包括各种步进器类型，包括“移动步进度条”：

Flutter有一个Stepper类，但记录很清楚。我如何实现上面所见的那种步进器？

有一个request for documentation on Github涉及这个主题，但到目前为止，没有任何关于如何实现这一点的明确指南。

Answer 1

我不认为Flutter的步进类与你所说的步进器相同。它意味着完全不同的目的。

至于你的“踏步机”，实际上很容易制作一个。我已经用两种方式完成了 - 一种是使用LinearProgressIndicator，另一种是使用简单的渐变，但你也可以使用custompaint轻松地完成它。

我把它包含在一个PageView示例中，因为它似乎就是你正在用它做的事情。一些PageView代码来自flutter gallery pagination example，实际上该页面也可能值得一看。

import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  PageController _pageController = new PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PageView(
          children: <Widget>[
            Center(child: Text("Page 1")),
            Center(child: Text("Page 2")),
            Center(child: Text("Page 3")),
            Center(child: Text("Page 4")),
          ],
          controller: _pageController,
          physics: AlwaysScrollableScrollPhysics(),
        ),
        bottomNavigationBar: Column(
          children: <Widget>[
            Container(
              height: 10,
              margin: EdgeInsets.symmetric(horizontal: 10),
              alignment: Alignment.center,
              child: GradientPageIndicator(
                pageController: _pageController,
                pageCount: 4,
                primaryColor: Colors.blue,
                secondaryColor: Colors.blue.withOpacity(0.2),
              ),
            ),
            Container(
              height: 10,
              margin: EdgeInsets.symmetric(horizontal: 10),
              alignment: Alignment.center,
              child: ProgressPageIndicator(
                pageController: _pageController,
                pageCount: 4,
                primaryColor: Colors.blue,
                secondaryColor: Colors.blue.withOpacity(0.2),
              ),
            ),
          ],
          mainAxisSize: MainAxisSize.min,
        ),
      ),
    );
  }
}

class ProgressPageIndicator extends AnimatedWidget {
  final PageController pageController;

  final int pageCount;

  final Color primaryColor;

  final Color secondaryColor;

  final num height;

  ProgressPageIndicator({
    @required this.pageController,
    @required this.pageCount,
    @required this.primaryColor,
    @required this.secondaryColor,
    this.height = 2.0,
  }) : super(listenable: pageController);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      child: LinearProgressIndicator(
        backgroundColor: secondaryColor,
        valueColor: Tween(begin: primaryColor, end: primaryColor).animate(kAlwaysCompleteAnimation),
        value: (pageController.page ?? pageController.initialPage) / (pageCount - 1),
      ),
    );
  }
}

class GradientPageIndicator extends AnimatedWidget {
  final PageController pageController;

  final int pageCount;

  final Color primaryColor;

  final Color secondaryColor;

  final num height;

  GradientPageIndicator({
    @required this.pageController,
    @required this.pageCount,
    @required this.primaryColor,
    @required this.secondaryColor,
    this.height = 2.0,
  }) : super(listenable: pageController);

  @override
  Widget build(BuildContext context) {
    double pagePosition = (pageController.page ?? pageController.initialPage) / (pageCount - 1);
    double alignPosition = pagePosition * 2 - 1;

    print("PagePosition: $pagePosition, alignPosition: $alignPosition");

    return Container(
      height: height,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [primaryColor, secondaryColor],
          begin: Alignment(alignPosition - 0.0001, 0),
          end: Alignment(alignPosition + 0.0001, 0),
        ),
      ),
    );
  }
}