用Flutter打造走马灯布局，让你的页面动起来！

2024-01-24 20:30:30

走马灯是一种常见的视觉效果，通常用于展示产品、图片或其他内容。它通过连续滚动页面来创建一种动态感，并让用户可以轻松地浏览大量信息。

Flutter是一个开源的、用于构建跨平台应用程序的框架，它以其高性能、灵活性和丰富的组件库而著称。在Flutter中，我们可以使用PageView.builder 部件来实现走马灯布局。PageView.builder 部件允许我们动态地生成页面，并通过滑动来进行切换。

下面，我们就一步一步地介绍如何使用 Flutter 来创建一个走马灯布局：

创建一个新的 Flutter 项目。
在项目的 lib 文件夹中创建一个名为 main.dart 的文件。
在 main.dart 文件中，导入以下库：

import 'package:flutter/material.dart';

创建一个名为 MyApp 的类，并将其作为项目的根小部件：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '走马灯',
      home: HomePage(),
    );
  }
}

创建一个名为 HomePage 的类，并将其作为主页小部件：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  PageController _pageController;
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('走马灯'),
      ),
      body: PageView.builder(
        controller: _pageController,
        onPageChanged: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        itemCount: 5,
        itemBuilder: (context, index) {
          return _buildPageItem(index);
        },
      ),
    );
  }

  Widget _buildPageItem(int index) {
    return Container(
      height: index == _currentIndex ? 300 : 200,
      color: Colors.primaries[index % Colors.primaries.length],
      child: Center(
        child: Text(
          '页面 $index',
          style: TextStyle(
            fontSize: 30,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}