演练中的下一个和上一个按钮

Question

我正在尝试使用 flutter 包构建一个应用程序介绍演练： transformer_page_view像这样：

return new Scaffold(
    backgroundColor: Color(0xFF202020),
    body: new TransformerPageView(
        loop: true,
        transformer: new ThreeDTransformer(),
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            color: Colors.white,
            child: Stack(
              children: <Widget>[
                .....
                      ],
                    ),
                  ),
                  alignment: Alignment.bottomCenter,
                )
              ],
            ),
          );
        },
        itemCount: 2));

一切都像我想要的那样工作正常......但是我有一个下一个和上一个按钮......我想要当点击下一步时它会转到索引 = 1，当单击上一个它会转到索引 = 0 ...

我试过这样的事情：

onPressed: () {
   if (index == 0 ){
      loginPage();
   }else{
      setState(() {
        index = 0;
      });
   }
 },

但这不起作用......如何实现这一目标的任何想法？

Answer 1

您可以使用 flutter PageView小部件执行相同的操作，如下所示

void main() => runApp(new PageDemo());

class PageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Page Demo', home: SamplePage());
  }
}

class SamplePage extends StatefulWidget {
  @override
  _SamplePageState createState() => _SamplePageState();
}

class _SamplePageState extends State<SamplePage> {
  List<Widget> _samplePages = [
    Center(
      child: Text('Page 1'),
    ),
    Center(child: Text('Page 2'))
  ];
  final _controller = new PageController();
  static const _kDuration = const Duration(milliseconds: 300);
  static const _kCurve = Curves.ease;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page Demo'),
      ),
      body: Column(
        children: <Widget>[
          Flexible(
            child: PageView.builder(
              controller: _controller,
              itemCount: _samplePages.length,
              itemBuilder: (BuildContext context, int index) {
                return _samplePages[index % _samplePages.length];
              },
            ),
          ),
          Container(
            color: Colors.lightBlueAccent,
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                FlatButton(
                  child: Text('Prev'),
                  onPressed: () {
                    _controller.previousPage(
                        duration: _kDuration, curve: _kCurve);
                  },
                ),
                FlatButton(
                  child: Text('Next'),
                  onPressed: () {
                    _controller.nextPage(duration: _kDuration, curve: _kCurve);
                  },
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

希望能帮助到你