Flutter水平步骤导航插件simple_horizontal_stepper的使用

Flutter水平步骤导航插件simple_horizontal_stepper的使用

水平步骤导航

一个水平步骤导航是一个水平布局的步骤。

维护者: Tanmoy Karmakar

规格

这个库允许你创建一个带有步骤集的水平步骤导航。每个步骤可以是一个不同的组件。步骤可以自定义标题和副标题。

该库完全用Dart编写。❤️

示例

安装

在你的pubspec.yaml文件中添加以下内容：

dependencies:
  simple_horizontal_stepper: ^0.0.1

简单使用

要将水平步骤导航集成到你的应用中，你需要导入import 'package:simple_horizontal_stepper/simple_horizontal_stepper.dart'，其中包含HorizontalStepper小部件。

以下是水平步骤导航的数据样本：

// 这是水平步骤导航的数据样本

List<StepperData> stepperData = [
  StepperData(
    title: "步骤1",
    subtitle: "步骤1副标题",
    onTapped: () {
      showCupertinoDialog("步骤1", "步骤1副标题", context);
    },
    isDone: true,
  ),
  StepperData(
    title: "步骤2",
    subtitle: "步骤2副标题",
    onTapped: () {
      showCupertinoDialog("步骤2", "步骤2副标题", context);
    },
    isDone: false,
  ),
];

小部件实现

以下是将水平步骤导航集成到应用中的小部件实现示例：

// 这是将水平步骤导航集成到应用中的小部件实现

Scaffold(
  body: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Padding(
        padding: const EdgeInsets.all(24),
        child: HorizontalStepperWithCard(
          stepperDataList: stepperData,
          tickColor: Colors.blue,
          cardColor: Colors.grey[700],
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(24),
        child: HorizontalStepper(
          stepperDataList: stepperData,
          tickColor: Colors.orange,
        ),
      ),
    ],
  ),
);

自定义使用

有多个选项可以提供更多控制：

属性 描述
stepperDataList 这是数据模型，用于向小部件提供数据
tickColor 帮助定制复选框圆圈的颜色
cardColor 帮助定制卡片颜色

StepperData 模型

你可以探索以下选项：

属性 描述
title 为步骤添加标题
subtitle 为步骤添加副标题
onTapped 帮助定制步骤的点击功能
isDone 用于切换复选框小部件

示例代码

以下是完整的示例代码：

// example/lib/main.dart

import 'package:example/homepage.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.dark,
      ),
      home: const Homepage(),
    );
  }
}

更多关于Flutter水平步骤导航插件simple_horizontal_stepper的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter水平步骤导航插件simple_horizontal_stepper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter应用中使用simple_horizontal_stepper插件来实现水平步骤导航的示例代码。这个插件允许你创建一个简单的水平步骤导航器，用户可以通过点击步骤来前进或后退。

首先，你需要在你的pubspec.yaml文件中添加对simple_horizontal_stepper的依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_horizontal_stepper: ^最新版本号  # 请替换为实际最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Dart文件中，你可以按照以下方式使用SimpleHorizontalStepper：

import 'package:flutter/material.dart';
import 'package:simple_horizontal_stepper/simple_horizontal_stepper.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentStep = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Horizontal Stepper Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SimpleHorizontalStepper(
          totalSteps: 3,
          currentStep: currentStep,
          onStepChange: (int step) {
            setState(() {
              currentStep = step;
            });
          },
          stepContents: [
            Container(
              alignment: Alignment.center,
              child: Text('Step 1: Enter your name'),
            ),
            Container(
              alignment: Alignment.center,
              child: Text('Step 2: Enter your email'),
            ),
            Container(
              alignment: Alignment.center,
              child: Text('Step 3: Confirm details'),
            ),
          ],
          stepButtonBuilder: (int step, bool isActive) {
            return ElevatedButton(
              onPressed: step < currentStep
                  ? null
                  : () => widget.onStepChange!(step),
              child: Text('Go to Step ${step + 1}'),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(
                  isActive ? Colors.blue : Colors.grey,
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

在这个示例中：

  1. SimpleHorizontalStepper接受几个参数：

    • totalSteps：总的步骤数。
    • currentStep：当前所在的步骤。
    • onStepChange：当步骤改变时的回调函数。
    • stepContents：每个步骤的内容，这里我们简单地使用了Text小部件。
    • stepButtonBuilder：自定义步骤按钮的构建器。这里我们为每个步骤创建了一个ElevatedButton，并且根据步骤是否激活来改变按钮的背景颜色。

  2. 在onStepChange回调中，我们使用setState方法来更新当前步骤的状态，从而触发UI的重新构建。

这个示例展示了如何使用simple_horizontal_stepper插件来创建一个基本的水平步骤导航器。你可以根据需要进一步自定义每个步骤的内容和样式。

回到顶部