我正在更改单击按钮时的综合浏览量页面。页面可以完美地更改,但是没有动画。我使用了animateTopage()方法,但是没有动画在起作用。
我进行了类start_test。此类的布局具有综合浏览量。每当我单击任何卡片时,都会显示下一页而没有任何动画。
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 1,
iconTheme: IconThemeData(color: Colors.black),
actions: <Widget>[
Padding(
padding: EdgeInsets.only(right: 60),
child: Row(
children: <Widget>[],
))
],
title: Text(
'Test',
style: TextStyle(color: Colors.black),
),
),
body: FutureBuilder<List<questions_data>>(
future: _fetch_questions(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('Failed to connect');
case ConnectionState.waiting:
return Center(
child: Text(
'Loading',
style: TextStyle(color: Colors.grey),
));
case ConnectionState.done:
if (snapshot.hasError) {
return Center(
child: InkWell(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Column(
children: <Widget>[
Text('Error in connection'),
Text('Tap to retry')
],
),
),
onTap: () {
setState(() {
CircularProgressIndicator();
});
},
),
);
} else if (snapshot.hasData) {
return Padding(
padding: EdgeInsets.all(20),
child: PageView.builder(
physics: AlwaysScrollableScrollPhysics(),
controller: _controller,
itemCount: snapshot.data.length,
itemBuilder: (ctx, i) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
topLeft: Radius.circular(10),
),
color: Colors.transparent,
border: Border.all(
color: Colors.grey.shade200, width: 1)),
child: ListView(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
topLeft: Radius.circular(10),
)),
height: 60,
child: Padding(
padding: EdgeInsets.all(15),
child: Center(
child: Text(
"Q",
style: TextStyle(color: Colors.black),
),
),
),
),
Container(
height: MediaQuery.of(context).size.height,
color: Colors.white,
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(15),
child: SingleChildScrollView(
child: Text(
'Flutter is Google’s mobile UI open source framework to build high-quality native (super fast) interfaces for iOS and Android apps with the unified codebase. build high-quality native (super fast) interfaces for iOS and Android apps with the unified codebase.',
style: TextStyle(
color: Colors.black,
fontSize: 15),
),
)),
Padding(
padding: EdgeInsets.all(5),
child: Card(
elevation: 2,
child: SizedBox(
width: MediaQuery.of(context)
.size
.width,
child: InkWell(
onTap: () {
_controller.animateToPage(
i + 1,
duration: Duration(
microseconds: 600),
curve: Curves.ease);
},
child: Padding(
padding: EdgeInsets.all(20),
child: Text(
snapshot.data[i].ans_one,
style: TextStyle(
color: Colors.black),
),
),
),
)),
),
Padding(
padding: EdgeInsets.all(5),
child: Card(
elevation: 2,
child: SizedBox(
width: MediaQuery.of(context)
.size
.width,
child: InkWell(
onTap: () {
_controller.animateToPage(
i + 1,
duration: Duration(
microseconds: 15000),
curve: Curves.ease);
},
child: Padding(
padding: EdgeInsets.all(20),
child: Text(
snapshot.data[i].ans_two,
style: TextStyle(
color: Colors.black),
),
),
),
)),
),
Padding(
padding: EdgeInsets.all(5),
child: Card(
elevation: 2,
child: SizedBox(
width: MediaQuery.of(context)
.size
.width,
child: InkWell(
onTap: () {
_controller.animateToPage(
i + 1,
duration: Duration(
microseconds: 15000),
curve: Curves.ease);
},
child: Padding(
padding: EdgeInsets.all(20),
child: Text(snapshot
.data[i].ans_three),
),
),
)),
),
Padding(
padding: EdgeInsets.all(5),
child: Card(
elevation: 2,
child: SizedBox(
width: MediaQuery.of(context)
.size
.width,
child: ***InkWell(
onTap: () {
_controller.animateToPage(
i + 1,
duration: Duration(
microseconds: 15000),
curve: Curves.ease);
},***
child: Padding(
padding: EdgeInsets.all(20),
child: Text(snapshot
.data[i].ans_four),
),
),
)),
)
],
),
)
],
),
);
}),
);
}
return Center(
child: InkWell(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Column(
children: <Widget>[
Text('Error in connection'),
Text('Tap to retry')
],
),
),
onTap: () {
setState(() {
CircularProgressIndicator();
});
},
),
);
default:
return Text('Loading...');
}
;
}),
);
我希望墨水瓶通话时有动画。但是那里没有动画。
答案 0 :(得分:0)
问题出在这里
_controller.animateToPage(
i + 1,
duration: Duration(
microseconds: 600),
curve: Curves.ease,
);
在这里,您使用microseconds
作为持续时间,这是最小的时间单位。它正在设置动画,但由于时间太短,因此动画不可见。
请尝试将其转换为milliseconds
或seconds