dart - Flutter 页面 View 不显示两张幻灯片

Question

我正在构建一个具有页面 View 的 flutter 应用程序。我想在屏幕上显示两张幻灯片。但是当使用 Pageview 时，我给 viewportFraction is 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)
            ],
          );
        }),
      ),
    );
  }
}