颤振页面视图未显示两张幻灯片答案

【问题标题】：Flutter page view not showing two slides颤振页面视图未显示两张幻灯片
【发布时间】：2019-10-04 11:27:42
【问题描述】：

我正在构建一个带有页面视图的颤振应用程序。我想在屏幕上显示两张幻灯片。但是当使用 Pageview 我给 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)
        ],
        ),
    ),
    );
}
}

截图如下

【问题讨论】：

你想在 viewpager 中一次适应两个侧面
是的，我想在视图寻呼机中放置两张幻灯片

标签： dart flutter flutter-layout

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

【讨论】：