我正在尝试将堆叠卡放在颤振容器的中心视图上。我正在尝试仅从左到右或从右到左设置像旋转或滑动这样的轮播。从右到左,下一张卡片将出现,并从左向右滑动,以前的卡片将回来。类似于example link to animation
到目前为止,我已经通过Stack
和Positioned
小部件获得了所需的视图。现在如何使幻灯片或动画看起来像示例?
到目前为止,尝试通过可拖动来做到这一点,它正在四处拖动,这不是我想要的行为。然后,我查看了PageView
,该控件不适用于Positioned
小部件,因为它们应该位于Stack
下。所以目前我不确定该怎么做?任何指南或示例都将非常有帮助,因为我刚刚开始颤抖了一个星期。
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SvgPicture.asset(
'assets/images/group_6.svg',
fit: BoxFit.scaleDown,
),
SizedBox(width: 10),
Text(
'My cool Header',
style: TextStyle(
color: const Color(0xFF000000),
fontSize: Constants.height / 70,
fontFamily: 'Exo2',
fontWeight: FontWeight.w600),
),
],
),
),
Expanded(
flex: 13,
child: Stack(
overflow: Overflow.visible,
alignment: Alignment.center,
children: <Widget>[
Positioned(
right: (sizingInformation.screenSize.width * 0.09),
left: (sizingInformation.screenSize.width * 0.21),
child: Card(
color: Colors.blue,
elevation: 10.0,
child: Container(
height: (sizingInformation.screenSize.height * 0.5),
),
),
),
Positioned(
right: sizingInformation.screenSize.width * 0.15,
left: sizingInformation.screenSize.width * 0.15,
child: Card(
color: Colors.red,
elevation: 10.0,
child: Container(
height: (sizingInformation.screenSize.height * 0.55),
),
),
),
],
),
),
Expanded(
flex: 2,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Some cool text',
style: TextStyle(
color: const Color(0xFF000000),
fontSize: Constants.height / 70,
fontFamily: 'Exo2',
fontWeight: FontWeight.w600,
),
),
Text(
'Some cool text',
style: TextStyle(
color: const Color(0xFF000000),
fontSize: Constants.height / 70,
fontFamily: 'Exo2',
fontWeight: FontWeight.w600),
),
]),
),
Expanded(
flex: 3,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Search
IconButton(
icon: SvgPicture.asset(
'assets/images/group_9.svg',
fit: BoxFit.contain,
),
onPressed: () {
widget.comingFromLogin
? Navigator.push(context,
SlideRightRoute(page: SearchFoodPage()))
: _loginPopUp();
}),
// Add Event
IconButton(
icon: SvgPicture.asset(
'assets/images/group_26.svg',
fit: BoxFit.contain,
),
onPressed: () {
widget.comingFromLogin
? Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Events()))
: _loginPopUp();
},
),
// Profile
IconButton(
icon: SvgPicture.asset(
'assets/images/group_8.svg',
fit: BoxFit.contain,
),
onPressed: () {
widget.comingFromLogin
? Navigator.push(context,
SlideLeftRoute(page: ProfileDrawer()))
: _loginPopUp();
}),
],
),
),
]),
),
);
是否类似于此库:flutter_swiper,堆栈布局
Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
"http://via.placeholder.com/288x188",
fit: BoxFit.fill,
);
},
itemCount: 10,
itemWidth: 300.0,
layout: SwiperLayout.STACK,
)