将填充应用于页面浏览量抖动的问题

Question

我有一个页面视图，当我向整个页面视图添加填充时，当小部件即将完成填充区域时滚动时，小部件将从屏幕视图中删除。如果我删除填充，则不会出现此问题。我还添加了 ClipBehaviour，以便在滚动时夹到两个边界。

我需要在页面之间连续滚动。

Padding(
      padding: const EdgeInsets.all(20.0),
      child: PageView(
        controller: _pageController,
        padEnds: false,
        pageSnapping: false,
        clipBehavior:  Clip.none,
        children: [
          for (int idx = 0; idx < 10; idx++)
            Container(
              decoration: BoxDecoration(
                  color:Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),

                  border: Border.all(color: Colors.blue)
              ),
             height: 150,
              width: double.infinity,
            ),
        ],
      ),
    )

注意：如果我删除填充，问题就不存在，但我需要连续滚动并应用填充。

Answer 1

尝试将 ClipBehaviour 更改为

Clip.antiAlias

我试过了，效果很好

import 'dart:math' as math;

import 'package:flutter/material.dart';

class TempPage extends StatelessWidget {
  const TempPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: PageView(
          padEnds: false,
          pageSnapping: false,
          clipBehavior: Clip.antiAlias, // Here is the changed made
          children: [
            for (int idx = 0; idx < 10; idx++)
              Container(
                decoration: BoxDecoration(
                    color:
                        Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
                            .withOpacity(1.0),
                    border: Border.all(color: Colors.blue)),
                height: 150,
                width: double.infinity,
              ),
          ],
        ),
      ),
    );
  }
}