具有水平、非填充子项的页面视图

12

看起来PageView将根据滚动的轴线自动填充。如何最好地适应PageView中的"窥视"呢?

我尝试使用标准的SliverChildListDelegate实现PageView.custom,但我猜想它不允许任意/自定义大小。我本来打算做一些自定义的东西,但决定先在这里问问。

请参见下面的图像,了解我要实现的示例。

enter image description here

2个回答

12

这个功能在2017年3月3日被添加。是在@EricSeidel的请求下实现的。

可以通过PageViewcontroller属性实现。

controller: PageController(
  initialPage: 1,
  viewportFraction: 0.8,
),

PageController.viewportFraction 用于查看前一个页面和后一个页面。 PageController.initialPage 用于在应用程序启动时显示中间页面。

import 'package:flutter/material.dart';

void main() => runApp(LimeApp());

class LimeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lime',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.symmetric(
          vertical: 50.0,
        ),
        child: PageView(
          controller: PageController(
            initialPage: 1,
            viewportFraction: 0.8,
          ),
          children: [
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0,), color: Colors.redAccent),
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0,), color: Colors.purpleAccent),
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0,), color: Colors.greenAccent)
          ],
        ),
      ),
    );
  }
}

我想不出更好的方法来增加页面之间的边距,也不知道如何避免最后一页和第一页之间的空白。

在这里输入图片描述


@Luke,你知道在页面之间添加边距的更好方法吗? - Blasanka
1
您可以使用 PageView.builder 来检查项目的 index 并省略第一个和最后一个项目的边距。 - Luke

6

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接