Flutter自定义滚动行为插件flutter_any_scroll的使用

简介

flutter_any_scroll 是一个Flutter插件，它允许用户在水平和垂直方向上进行滚动。该插件适用于iOS、Android、Mac、Windows和Web平台。它的使用方法与ListView类似。

• 作者: Abdur Mohammed | Senior Software Engineer | Sydney, Australia
• 贡献: 该插件最初为个人项目编写，现分享给Flutter社区。

演示

移动端

桌面端

Web端

个人应用演示

示例用法

以下是一个简单的示例，展示了如何使用 FlutterAnyScroll：

FlutterAnyScroll(
    mainAxisCount: 5,
    crossAxisCount: 5,
    crossAxisSpacing: 5,
    header: const SampleHeader(),
    children: sampleListViewItems,
);

完整示例代码

以下是一个完整的示例应用程序，展示如何使用 flutter_any_scroll 插件来实现图片网格布局，并通过按钮动态加载更多图片。

import 'package:flutter/material.dart';
import 'package:flutter_any_scroll/flutter_any_scroll.dart';
import 'package:google_fonts/google_fonts.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Any Scroll Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Any Scroll Demo Home Page'),
    );
  }
}

class ImageCell extends StatelessWidget {
  final String imageUrl;

  ImageCell({required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(5.0),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.grey[300],
        ),
        child: Image.network(imageUrl, fit: BoxFit.cover),
      ),
    );
  }
}

class Gateway {
  Future<List<Map<String, dynamic>>> getImages() async {
    // Simulate fetching images from a network source
    await Future.delayed(const Duration(seconds: 2));
    return List.generate(25, (index) => {'url': 'https://via.placeholder.com/150'});
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<ImageCell> _images = [];
  final Gateway _gateway = Gateway();

  Future<void> getImages() async {
    final rawImages = await _gateway.getImages();
    setState(() {
      for (final value in rawImages) {
        _images.add(ImageCell(imageUrl: value['url'] as String));
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        height: MediaQuery.of(context).size.height,
        child: FlutterAnyScroll(
          header: Container(
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(25),
              color: Colors.white70,
            ),
            child: Padding(
              padding: const EdgeInsets.only(top: 50, bottom: 10),
              child: Center(
                child: Text(
                  'Any scroll demo',
                  style: GoogleFonts.caesarDressing(
                    textStyle: const TextStyle(
                      color: Colors.black,
                      fontSize: 45,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
          ),
          crossAxisCount: 5,
          mainAxisCount: 5,
          crossAxisSpacing: 5,
          children: _images,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getImages,
        tooltip: 'Get Images',
        child: const Icon(Icons.add),
      ),
    );
  }
}

关于作者

• LinkedIn
• GitHub
• Twitter @Abdur_Developer

希望这个插件能帮助你在Flutter项目中实现更灵活的滚动效果！