Flutter 实战：从 0 到 1 搭建网易云音乐 APP（六、歌词（一））

0. 确认需求

没错，首先还是我们的老套路，确认需求。

歌词的功能其实是真的不少，而且我现在也没有完成，这一节主要就来讲前三个。

1. 展示歌词

// lib/pages/lyric_page.dart
import 'package:flutter/material.dart';

class LyricPage extends StatelessWidget {
  const LyricPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('歌词'),
      ),
      body: ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('歌词 $index'),
          );
        },
      ),
    );
  }
}

2. 歌词同步

// lib/pages/lyric_page.dart
import 'package:flutter/material.dart';

class LyricPage extends StatelessWidget {
  const LyricPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('歌词'),
      ),
      body: ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('歌词 $index'),
          );
        },
      ),
    );
  }
}

3. 歌词翻译

// lib/pages/lyric_page.dart
import 'package:flutter/material.dart';

class LyricPage extends StatelessWidget {
  const LyricPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('歌词'),
      ),
      body: ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('歌词 $index'),
          );
        },
      ),
    );
  }
}

结语

本节中，我们完成了网易云音乐歌词页面的搭建。在下一节中，我们将继续完成歌词页面的功能。