Flutter水平滚动视图插件horizontal_scroll

Flutter水平滚动视图插件horizontal_scroll_view的使用

介绍

horizontal_scroll_view 是一个为 Flutter 应用程序提供无缝水平滚动功能的插件。它支持 Dart 3，适用于 Android、iOS、macOS、Windows 和 Linux 平台。通过其直观的设计，horizontal_scroll_view 消除了需要进行繁琐布局调整的需求，如 expanded 或固定高度。只需指定每个元素的宽度，内容就会平滑地在水平方向上滚动。利用 Dart 的 null 安全特性，该插件提供了强大的可靠性，并且可以通过 HorizontalScrollViewController 提供进一步的自定义选项。使用 horizontal_scroll_view 可以简化 UI 开发，轻松实现流畅、响应式的用户体验。

Preview example

特性

流畅性能：享受流畅和响应式的水平滚动。
可定制：轻松调整项目宽度、间距和对齐方式。
跨平台：在 Android、iOS、macOS、Linux 和 Windows 上无缝工作。
滚动控制：可选的 HorizontalScrollViewController 用于高级滚动控制。

安装

将以下代码添加到 pubspec.yaml 文件中：

dependencies:
  horizontal_scroll_view: ^0.0.5

使用

使用 `HorizontalScrollView`

HorizontalScrollView(
  itemWidth: 153, // 每个项目的宽度。
  crossAxisSpacing: 8.0, // 同一行之间项目的间距。
  alignment: CrossAxisAlignment.center, // 内容在行中的对齐方式（默认居中）
  children: [
    // 列表项
    // ...
  ],
)

使用 `HorizontalScrollView.builder`

如果要创建具有动态内容的水平滚动视图，请使用 HorizontalScrollView.builder。以下是一个示例：

import 'package:horizontal_scroll_view/horizontal_scroll_view.dart';

HorizontalScrollView.builder(
  itemWidth: (16 / 9) * 80, // 每个项目的宽度。
  crossAxisSpacing: 16, // 同一行之间项目的间距。
  alignment: CrossAxisAlignment.center, // 内容在行中的对齐方式（默认居中）
  itemCount: 12, // 列表中的总项目数。
  itemBuilder: (BuildContext context, int index) {
    // 创建并返回每个项目的子组件。
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: SizedBox(
            height: 80,
            width: (16 / 9) * 80,
            child: Image.network(
              "https://via.placeholder.com/150",
              fit: BoxFit.cover,
            ),
          ),
        ),
        SizedBox(
          height: 2,
        ),
        SizedBox(
          width: (16 / 9) * 80,
          child: Text(
            "Mission Impossible II Breaking the Barrier",
            overflow: TextOverflow.ellipsis,
            maxLines: 2,
            style: TextStyle(fontSize: 12, fontWeight: FontWeight.w400),
          ),
        ),
      ],
    );
  },
)

使用 `HorizontalScrollViewController`

对于高级滚动控制，可以使用 HorizontalScrollViewController:

HorizontalScrollViewController _controller = HorizontalScrollViewController();

HorizontalScrollView(
  controller: _controller,
  // 其他属性...
);

// 程序化滚动到特定项目
_controller.scrollToIndex(index);

更多关于Flutter水平滚动视图插件horizontal_scroll_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

vueper 1楼•5 天前

更多关于Flutter水平滚动视图插件horizontal_scroll_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter中使用horizontal_scroll_view（实际上Flutter没有直接名为horizontal_scroll_view的插件，但我们可以使用ListView.builder或SingleChildScrollView结合Row来实现水平滚动视图）的代码示例。

使用`ListView.builder`实现水平滚动视图

ListView.builder是一个高效的方式来创建大量子项的滚动列表，尤其是当子项数量很大时，因为它只会构建可见的子项。

import 'package:flutter/material.dart';

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

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

class HomeScreen extends StatelessWidget {
  final List<String> items = List.generate(50, (index) => "Item $index");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Horizontal Scroll View Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Container(
              width: 100,
              child: Center(
                child: Text(items[index]),
              ),
              margin: EdgeInsets.symmetric(horizontal: 8.0),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.circular(8),
              ),
            );
          },
        ),
      ),
    );
  }
}

使用`SingleChildScrollView`和`Row`实现水平滚动视图

如果你有一组固定数量的子项，并且希望它们水平排列且可滚动，可以使用SingleChildScrollView和Row的组合。

import 'package:flutter/material.dart';

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

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

class HomeScreen extends StatelessWidget {
  final List<String> items = List.generate(10, (index) => "Item $index");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Horizontal Scroll View Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: List.generate(
              items.length,
              (index) {
                return Container(
                  width: 100,
                  child: Center(
                    child: Text(items[index]),
                  ),
                  margin: EdgeInsets.symmetric(horizontal: 8.0),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey),
                    borderRadius: BorderRadius.circular(8),
                  ),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

这两个示例展示了如何在Flutter中实现水平滚动视图。第一个示例使用ListView.builder，适合处理大量数据；第二个示例使用SingleChildScrollView和Row，适合处理固定数量的子项。根据你的具体需求选择合适的实现方式。

Flutter水平滚动视图插件horizontal_scroll_view的使用