七爪源码：在 Flutter 中使用 PageView Builder 构建折叠滚动

在本文中，我们将创建一个类似于 LOUIS VUITTON 移动应用程序的列表视图的水平滚动。

最终应用程序的工作原理如下：

在深入研究编码之前，让我们讨论将在此应用程序中使用的小部件。

页面预览

PageView 是一个小部件，它生成可滚动的屏幕页面。 这些页面可以是由构建器功能构建的固定页面或重复页面。

PageView 在构造元素时的行为类似于 ListView。 PageView 还允许用户在 Flutter 应用程序中的不同屏幕之间切换。

PageView 类的构造函数

PageView({Key key, 
Axis scrollDirection, 
bool reverse, 
PageController controller, 
ScrollPhysics physics, 
bool pageSnapping, 
void Function(int) onPageChanged, 
List children, 
DragStartBehavior dragStartBehavior, 
bool allowImplicitScrolling})

PageView 小部件的属性：

• scrollDirection：它定义页面在哪个轴上滚动，即垂直或水平
• reverse：定义滚动方向。默认设置为 false。
• 控制器：它允许我们操作在 PageView 中可见的页面。
• 物理：它定义了当页面无法拖动时页面在页面端点处的动画效果。
• pageSnapping：对于自定义滚动行为很有用。它采用布尔值。
• onPageChanged：页面有变化时触发的函数。
• children：它包含小部件列表。
• dragStartBehaviour：此属性将 DragStartBehavior 枚举（最终）保存为对象。它控制开始注册拖动行为的方式。
• allowImplicitScrolling：此属性接受一个布尔值作为对象。它控制是否将隐式滚动分配给小部件的页面。

PageView.builder

PageView.builder 创建一个可滚动列表，该列表使用按需创建的小部件逐页工作。

此构造函数适用于具有大量（或无限）子级的页面视图，因为仅对那些实际可见的子级调用构建器。

提供非空 itemCount 让 PageView 计算最大滚动范围。

PageView.builder 小部件的属性

它拥有 PageView 的所有属性，并拥有一些自己的属性。

• itemBuilder：只有索引大于或等于零且小于 itemcount 时才会调用它。
• restoralionID：restoreidID 以字符串为对象。它用于保存滚动位置并在以后恢复它。
• clipBehaviour：内容将根据此选项进行剪辑（或不剪辑）。
• padEnds：是否在列表的两端添加填充。

堆

Stack 是 Fl utter SDK 的内置小部件，允许用户将小部件保持在彼此之上，从而形成小部件层。第一个小部件是最底部的项目，最后一个小部件是最顶部的项目。

Stack 小部件的一些关键点是：

• 堆栈中的孩子可以定位或不定位。
• 定位子项是那些包装在具有至少一个非空属性的定位小部件中的子项。
• 堆栈自己调整大小以包含所有未定位的子项，这些子项根据对齐方式进行定位（在从左到右的环境中默认为左上角，在从右到左的环境中默认为右上角）。
• 然后根据它们的 top、right、bottom 和 left 属性相对于堆栈放置定位的子项。

• 对齐属性可用于更改小部件的对齐方式。

让我们深入了解

首先，我们创建将在我们的应用程序中使用的数据。

在 lib 文件夹中创建 dummy_data.dart。在这里，我们放置项目数组。

dummy_data.dart：

var model = [
      "https://images-static.nykaa.com/uploads/f5a1d948-7947-4241-a08e-caac8d991c48.jpg?tr=w-300,cm-pad_resize",
      "https://images-static.nykaa.com/uploads/c622c7aa-7cdb-43ba-98b7-acb48df7f7c5.jpg?tr=w-300,cm-pad_resize",
      "https://images-static.nykaa.com/uploads/fea188e3-9067-4c1f-a3a3-07560f60d73d.jpg?tr=w-300,cm-pad_resize",
      "https://images-static.nykaa.com/uploads/2f2275d3-0b85-4189-8fb3-7318ca1c3bec.jpg?tr=w-300,cm-pad_resize",
      "https://images-static.nykaa.com/uploads/9a4d3606-9aeb-4285-8db1-4918428a1c76.jpg?tr=w-300,cm-pad_resize",
      "https://images-static.nykaa.com/uploads/455bf3cd-82d4-4b2c-ab5d-e56491edc0f1.jpg?tr=w-300,cm-pad_resize",
];

数据已准备就绪，现在让我们创建将成为网页浏览项目的小部件。 在 lib 文件夹中创建 page_view_item.dart。

page_view_item.dart

import 'package:flutter/material.dart';

class PageViewItem extends StatelessWidget {
  final int index;
  final String url;
  final double width;
  static const String name='';
  static const String price='';

  const PageViewItem({
    Key? key,
    required this.index,
    required this.width,
    required this.url,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => print(index),
      child: Card(
        elevation: 5,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(1.0),
        ),
        child: Image.network(
          url,
          fit: BoxFit.cover,

          width: width,
        ),
      ),
    );
  }
}

接下来我们创建 homepage.dart 文件：

首先，我们配置页面视图并创建提供 viewportFraction 的 PageController。

final _controller = PageController(    viewportFraction: 0.5,  );

视口分数

它定义了每个页面应该占据的视口部分。 默认为 1.0，这意味着每个页面在滚动方向上填充视口。

当我们的控制器被设置后，我们会计算页面浏览量的单个项目的宽度。

late final _itemWidth =MediaQuery.of(context).size.width * _controller.viewportFraction;

然后我们在 initState 中初始化控制器。

@override  void initState() {    
super.initState();
_controller.addListener(() => setState(() {          
_page = _controller.page!;        
}));  }

这就是我们的 homepage.dart 文件的外观。

homepage.dart：

import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';

import 'package:flutter/material.dart';

import 'dummy_data.dart';
import 'page_view_item.dart';
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State createState() => _HomePageState();
}

class _HomePageState extends State {

  /// The current page of the page view
   double _page = 0;

  /// The index of the leftmost element of the list to be displayed
  int get _firstItemIndex => _page.toInt();

  /// Controller to get the current position of the page view
  final _controller = PageController(
    viewportFraction: 0.5,
  );

  /// The width of a single item
  late final _itemWidth =
      MediaQuery.of(context).size.width * _controller.viewportFraction;

@override
  void initState() {
    super.initState();
    _controller.addListener(() => setState(() {
          _page = _controller.page!;
        }));
  }
   @override
  void dispose() {
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("LV Scroll"),
      
      ),
      body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          
          Stack(
          children: [
            Positioned.fill(
              child: Align(
                alignment: Alignment.centerLeft,
                child: SizedBox(
                  width: _itemWidth,
                  child: FractionallySizedBox(

                    child: PageViewItem(
                      index: _firstItemIndex,
                      width: _itemWidth,
                      url: model[_firstItemIndex],

                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 250,
              child: PageView.builder(
                padEnds: false,
                controller: _controller,
                itemBuilder: (context, index) {
                  return Opacity(
                    opacity: index <= _firstItemIndex ? 0 : 1,
                    child: PageViewItem(
                      index: index,

                      width: _itemWidth,
                      url: model[index],

                    ),
                  );
                },
                itemCount: model.length,
              ),
            ),
          ],
    ),
        ],
      ),
    );
  }
}

结论

我希望这篇文章对你有所帮助，并且你学到了新的东西。 我在这篇文章中使用了各种对你们中的一些人来说可能是新的东西。