Flutter listview 限制滚动答案

【问题标题】：Flutter listview limit scrollFlutter listview 限制滚动
【发布时间】：2019-05-20 06:09:20
【问题描述】：

我正在开发一个颤振应用程序。我正在使用ListView 进行滚动。我需要水平滚动。滚动幻灯片宽度为 75% 0f 屏幕宽度。我有六张幻灯片，前三张幻灯片的颜色是红色、紫色、琥珀色。当我滚动第一张幻灯片时，红色。它将显示第二个幻灯片。这意味着滚动宽度为 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,)
            ],
        );
        }),
    ),
    );
}
}

当前滚动截图

【问题讨论】：

api.flutter.dev/flutter/widgets/PageView-class.html
我没有得到答案
PageView 小部件提供了您想要的开箱即用的大部分功能。看看吧。
能否请评论 //physics: const PageScrollPhysics()，这一行并检查。
@PriyankGujarati 如果我评论 //physics: const PageScrollPhysics(), Scroll 将不起作用。

标签： dart flutter flutter-layout

【解决方案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,)
  ],
);

...

希望对你有帮助！

【讨论】：

【解决方案2】：

我使用了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,),
 ], 
), ], );

【讨论】：