Dart 颤振列表视图限制滚动条

我正在开发一个颤振应用程序。我正在使用

ListView

进行滚动。我需要水平滚动。滚动幻灯片宽度为屏幕宽度的75%。我有六张幻灯片，前三张幻灯片的颜色是红色，紫色，琥珀色。当我将第一张幻灯片滚动到红色时。它将显示第二张幻灯片的一半。这意味着滚动宽度为100%。我想在滚动时显示每张幻灯片。如果我滚动红色，我想显示紫色完成

import 'package:flutter/material.dart';

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

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

class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return Scaffold(
    body: Container(
        height: MediaQuery.of(context).size.width/1.5,
        margin: EdgeInsets.symmetric(vertical: 50.0),
        child: LayoutBuilder(builder: (context, snapshot) {
        final width = MediaQuery.of(context).size.width / 1.5; 
        return ListView(
            itemExtent: width,
            physics: const PageScrollPhysics(), 
            scrollDirection: Axis.horizontal,
            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.amberAccent,),
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.blueAccent,),
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.pinkAccent,),
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.greenAccent,)
            ],
        );
        }),
    ),
    );
}
}

当前滚动屏幕截图

---

我使用了

PageView

而不是

ListView

PageView(children: <Widget>[ 
ListView(itemExtent: width, 
// physics: const PageScrollPhysics(),     
scrollDirection: Axis.horizontal, 
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.amberAccent,),
 ], 
), ], );

PageView（子项：[
ListView（itemExtent:width，
//物理：常量页滚动物理（），
滚动方向：轴水平，
儿童：[集装箱(
边距：边集。对称（水平：10.0），颜色：颜色。红色强调，），
容器（边距：边集。对称（水平：10.0），颜色：颜色。紫色，），
容器（边距：边集。对称（水平：10.0），颜色：Colors.amberAccent，），
], 
), ], );

您需要在ListView中添加填充，以便将滚动边界偏移到屏幕中。下面我将它添加到您的代码中，边边界为16

...

ListView(
  itemExtent: width,
  physics: const PageScrollPhysics(), 
  padding: EdgeInsets.symmetric(horizontal: 16.0), //This is where you put your side padding
  scrollDirection: Axis.horizontal,
  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.amberAccent,),
    Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.blueAccent,),
    Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.pinkAccent,),
    Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.greenAccent,)
  ],
);

...

---

希望有帮助

我没有得到答案

PageView

widget提供了您想要的大部分现成功能。请看一看。请对//physics:const PageScrollPhysics（），这一行进行注释，然后检查。@PriyankGujarati如果我对//physics:const PageScrollPhysics（）进行注释，则滚动将无法工作。