dart - Flutter ListView限制滚动

Question

我正在开发一个Flutter应用程序。我正在使用ListView进行滚动。我需要水平滚动。滚动幻灯片的宽度为0f屏幕宽度的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,)
            ],
        );
        }),
    ),
    );
}
}

当前滚动屏幕截图

Answer 1

您需要在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,)
  ],
);

...

希望能帮助到你!