flutter - 如何实现索引堆栈之间的幻灯片过渡？

Question

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

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

这是带有我当前代码的编辑过的帖子。

Answer 1

尝试使用PageController而不是IndexedStack checkout the docs for PageController