Flutter 中实现 Spotify 风格的应用栏按钮：分步指南

2024-03-28 11:04:08

在 Flutter 中打造 Spotify 风格的应用栏按钮

前言

在 Flutter 应用开发中，构建具有时尚和交互性用户界面的挑战之一是创建类似 Spotify 的应用栏按钮。这些按钮会随着选项卡栏功能的变化而改变颜色，为用户提供直观的导航体验。本文旨在提供分步指南，帮助你轻松实现这一效果，提升你的 Flutter 应用程序的整体外观和可用性。

理解 Spotify 的应用栏设计

Spotify 的应用栏按钮巧妙地结合了选项卡栏功能和美观设计。这些按钮直接位于应用栏中，根据选定的选项卡显示不同的颜色。这种设计为用户提供了一种简单且高效的方式来浏览应用程序的不同部分，同时保持界面的整洁和吸引力。

在 Flutter 中创建自定义 TabBar

为了实现 Spotify 风格的按钮，我们将创建自己的自定义 TabBar。这将允许我们完全控制按钮的外观和行为，包括颜色更改效果。以下是如何创建自定义 TabBar：

class CustomTabBar extends StatelessWidget {
  final List<String> tabs;
  final TabController controller;

  const CustomTabBar({Key? key, required this.tabs, required this.controller}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TabBar(
      controller: controller,
      indicatorColor: Colors.transparent, // 隐藏指示器
      tabs: [
        for (final tab in tabs)
          Tab(
            child: Text(
              tab,
              style: TextStyle(
                color: controller.index == tabs.indexOf(tab) ? Colors.green : Colors.grey,
              ),
            ),
          ),
      ],
    );
  }
}

在这个自定义的 TabBar 中，我们遍历选项卡列表并动态生成 Tab 控件。每个 Tab 的子文本的颜色基于当前选定的选项卡，实现了 Spotify 风格的颜色更改效果。

构建应用栏

有了自定义的 TabBar，我们现在可以构建应用栏：

PreferredSizeWidget buildAppBar() {
  return AppBar(
    elevation: 0, // 去除阴影
    backgroundColor: Colors.white,
    title: CustomTabBar(tabs: ['全部', '音乐', '播客'], controller: TabController(length: 3, vsync: this)),
  );
}

在这里，我们创建了一个 PreferredSizeWidget 来构建应用栏。我们指定了背景颜色、消除了阴影并添加了我们自定义的 TabBar。

代码示例

完整的代码示例如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: buildAppBar(),
      ),
    );
  }

  PreferredSizeWidget buildAppBar() {
    return AppBar(
      elevation: 0, // 去除阴影
      backgroundColor: Colors.white,
      title: CustomTabBar(tabs: ['全部', '音乐', '播客'], controller: TabController(length: 3, vsync: this)),
    );
  }
}

class CustomTabBar extends StatelessWidget {
  final List<String> tabs;
  final TabController controller;

  const CustomTabBar({Key? key, required this.tabs, required this.controller}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TabBar(
      controller: controller,
      indicatorColor: Colors.transparent, // 隐藏指示器
      tabs: [
        for (final tab in tabs)
          Tab(
            child: Text(
              tab,
              style: TextStyle(
                color: controller.index == tabs.indexOf(tab) ? Colors.green : Colors.grey,
              ),
            ),
          ),
      ],
    );
  }
}