如何在索引堆栈之间实现幻灯片过渡?

时间:2019-06-18 22:43:09

标签: flutter dart

我正在尝试通过滑动过渡从堆栈平滑过渡到另一个。我将索引设置为计数器,每按一次该按钮,索引就会递增并移至下一个堆栈。有没有一种方法可以在索引堆栈中的每个堆栈之间创建幻灯片过渡。

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),
  ),
);

这是经过编辑的帖子,其中包含我当前拥有的代码。

1 个答案:

答案 0 :(得分:0)

尝试使用PageController代替IndexedStack 查看the docs for PageController