颤振 - 动画生成器，动画/小部件在首次加载时出现错误

Question

当我第一次加载生成器时，我所有的卡片在跳转到正确的大小和比例之前都相同一秒钟，有谁知道我如何调整它，以便它们从一开始就具有正确的大小？

奇怪的是，当我用一个装满图像的容器替换我的填充和卡片小部件时，它似乎以正确的大小生成，但是我需要它们作为我以后布局的卡片。

(我还计划将其全部放入小部件类中，而不是将所有这些代码放在我的主代码中，而只是返回一个自定义滚动条。

请检查以下 GIF：

动画故障的动图 动画的GIF在仅使用容器时工作正常

任何帮助修复初始加载将不胜感激！ :)

import 'package:flutter/material.dart';
import 'package:blink/widget/customScroller.dart';

void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
PageController pageController;
List<String> images = [
"https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXRfe-GzBFRQzv8udHMCshqQGAj2JD5SGsR7CoyWP_HqFapJCYSA&s",
"https://ichef.bbci.co.uk/wwfeatures/live/976_549/images/live/p0/7w/b9/p07wb9xk.jpg",
"https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&w=1000&q=80"
];
@override
void initState() {
// TODO: implement initState
pageController = PageController(initialPage: 1, viewportFraction: 0.77);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: PageView.builder(
controller: pageController,
itemCount: images.length,
itemBuilder: (context,position){
return customScroller(position);
}),);
}
customScroller(int index) {
return AnimatedBuilder(
animation: pageController,
builder: (context, widget) {
double val = 1;
if(pageController.position.haveDimensions){
val = pageController.page - index;
val = 1 - (val.abs()*0.3).clamp(0.0,1.0);}
return Center(
child: SizedBox(
height: Curves.easeInOut.transform(val) *300,
width: Curves.easeInOut.transform(val) *400,
child: widget,
),
);
},
//      child: Container(
//        margin: EdgeInsets.all(10),
//        child: Image.network(images[index],fit:BoxFit.cover),
//      ),
// When I use the above code as the child instead of the padding with the card in it seems to spawn correctly
child: Padding(
padding: EdgeInsets.fromLTRB(0, 15, 0, 15),
child: Container(
child: Card(
color: Colors.white70,
elevation: 9,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
clipBehavior: Clip.antiAlias,
child: Container(
color: Colors.white,
padding: EdgeInsets.all(5),
child: Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
height: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(0.0),
bottomRight: Radius.circular(0.0),
bottomLeft: Radius.circular(20.0)),
child: new Image.network(
images[index],
fit: BoxFit.cover,
),
),
),
),
],
),
),
),
),
)
);
}
}

Answer 1

您缺少的是 AnimatedBuilder 构建方法仅在存在某些动画时才运行。不是一开始。因此，这就是为什么如果您滚动而不是之前滚动，大小会发生变化的原因。

您的子小部件没有用转换器小部件(或大小框(包装，因此它对所有索引都保持不变(一开始 - 构建器尚未运行(。在我的例子中，我也用一个SsizeBox包裹了孩子，并给了val一些初始值。

工作示例：

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
PageController pageController;
List<String> images = [
"https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXRfe-GzBFRQzv8udHMCshqQGAj2JD5SGsR7CoyWP_HqFapJCYSA&s",
"https://ichef.bbci.co.uk/wwfeatures/live/976_549/images/live/p0/7w/b9/p07wb9xk.jpg",
"https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&w=1000&q=80"
];
@override
void initState() {
// TODO: implement initState
pageController = PageController(initialPage: 1, viewportFraction: 0.77);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: PageView.builder(
controller: pageController,
itemCount: images.length,
itemBuilder: (context, position) {
return customScroller(position);
}),
);
}
customScroller(int index) {
Widget child = Padding(
padding: EdgeInsets.fromLTRB(0, 15, 0, 15),
child: Container(
child: Card(
color: Colors.white70,
elevation: 9,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
clipBehavior: Clip.antiAlias,
child: Container(
color: Colors.white,
padding: EdgeInsets.all(5),
child: Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
height: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(0.0),
bottomRight: Radius.circular(0.0),
bottomLeft: Radius.circular(20.0)),
child: new Image.network(
images[index],
fit: BoxFit.cover,
),
),
),
),
],
),
),
),
),
);
double val = (index == 1)?1:0.7;
return AnimatedBuilder(
animation: pageController,
builder: (context, widget) {
if (pageController.position.haveDimensions) {
val = pageController.page - index;
val = 1 - (val.abs() * 0.3).clamp(0.0, 1.0);
}
print("val: $val; index: $index");
return _getTransformedSizedBox(val, widget);
},
//      child: Container(
//        margin: EdgeInsets.all(10),
//        child: Image.network(images[index],fit:BoxFit.cover),
//      ),
// When I use the above code as the child instead of the padding with the card in it seems to spawn correctly
child: _getTransformedSizedBox(val, child));
}
_getTransformedSizedBox(double val, Widget widget) {
return Center(
child: SizedBox(
height: Curves.easeInOut.transform(val) * 300,
width: Curves.easeInOut.transform(val) * 400,
child: widget,
),
);
}
}