我正在尝试通过滑动过渡从堆栈平滑过渡到另一个。我将索引设置为计数器,每按一次该按钮,索引就会递增并移至下一个堆栈。有没有一种方法可以在索引堆栈中的每个堆栈之间创建幻灯片过渡。
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
}
);
}
child: IndexedStack(
index: _counter,
children: <Widget>[
Container(
color: Colors.grey,
alignment: Alignment.center, // where to position the child
child: Container(
child: Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Stack 1",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
)
),
Container(
color: Colors.grey,
alignment: Alignment.center, // where to position the child
child: Container(
child: Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Stack 2",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
)
),
Container(
color: Colors.grey,
alignment: Alignment.center, // where to position the child
child: Container(
child: Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Stack 3",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
)
),
Container(
color: Colors.grey,
alignment: Alignment.center, // where to position the child
child: Container(
child: Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Stack 4",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
)
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter(),
tooltip: 'Next page',
child: Icon(Icons.arrow_forward),
),
);
这是经过编辑的帖子,其中包含我当前拥有的代码。