Flutter页面视图未显示两张幻灯片

Question

我正在构建具有页面视图的Flutter应用程序。我想在屏幕上显示两个幻灯片。但是，当使用网页浏览时，我给的viewportFraction是0.5。在第一张幻灯片之前和最后一张幻灯片之后，它显示空白。两张幻灯片由于空白而不能完全出现，我想删除空白。我的代码如下所示

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(
        margin: EdgeInsets.symmetric(
        vertical: 50.0,
        ),
        child: PageView(
        controller: PageController(
            initialPage: 0,
            viewportFraction: 0.5,
        ),
        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)
        ],
        ),
    ),
    );
}
}

下面是屏幕截图

Answer 1

作为选择

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(
        margin: EdgeInsets.symmetric(vertical: 50.0),
        child: LayoutBuilder(builder: (context, snapshot) {
          final width = snapshot.maxWidth / 2; // magic is here
          return ListView(
            itemExtent: width,
            physics: const PageScrollPhysics(), // and here
            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)
            ],
          );
        }),
      ),
    );
  }
}