flutter - 具有水平、未填充子项的 PageView

标签 flutter

似乎 PageView 将始终根据滚动的轴进行填充。在 PageView 中满足“偷看”的最佳方法是什么?

我尝试使用标准 SliverChildListDelegate 实现 PageView.custom 但我猜这不允许任意/自定义大小。我打算开始做一些自定义的事情,但决定在这里问是一个好的开始。

请参阅下图,了解我正在努力实现的目标。

enter image description here

最佳答案

此功能是 added in 3 Mar 2017 .之后 @EricSeidel's request .

这可以通过controller 来实现PageView 的属性(property).

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)
          ],
        ),
      ),
    );
  }
}

我想不出更好的方法来在页面之间添加边距以及如何避免最后一页和起始页之后的空间。

enter image description here

关于flutter - 具有水平、未填充子项的 PageView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42422621/

相关文章:

flutter - 在 Flutter 中获取脚手架底部导航栏的高度

dart - 在Flutter中构建期间维护StatefulWidget的状态

flutter - 如何在Flutter中进行此UI设计

flutter - 仅将指定的可选参数传递给基础小部件

flutter - 如何在 flutter 中从右到左制作图片动画

android - flutter 中的自定义时间轴 View

http - http.get 和 Null 类型响应的问题

flutter - 用 flutter 本地保存值

flutter - 给定 ChangeNotifier 中的状态更改,更改 TabView 中的选定选项卡

firebase - Firebase搜索查询返回空结果