我正在构建一个具有页面 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)
],
),
),
);
}
}
截图如下
最佳答案
作为一个选项
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)
],
);
}),
),
);
}
}
关于dart - Flutter 页面 View 不显示两张幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56181187/