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 ... < / p>

我尝试过这样的事情：

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

但这是行不通的...如何实现这一目标的任何想法？

Answer 1

您可以对颤抖的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);
                  },
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

希望有帮助

Answer 2

TransformerPageView 具有一个 controller 属性，可以在创建窗口小部件时对其进行设置。然后，您可以使用 IndexController 实例获取当前索引/页面，移至任何索引，移至堆栈中的上一页或下一页。

class IntroScreen extends StatefulWidget {
 static String id = 'intro';
 final String title;
 IntroScreen({this.title});
 @override
 IntroScreenState createState() {
   return IntroScreenState();
 }
}

class IntroScreenState extends State<IntroScreen> {
final IndexController controller = IndexController();

  return new Scaffold(
  backgroundColor: Color(0xFF202020),
  body: new TransformerPageView(
    loop: true,
    controller: controller,
    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));

然后您的onPress按钮可以是

  onPressed: () {
    //not that only use what you need below and remove unncessary snippet. This sample is just for explanation
    controller.previous(); //if you wanna go to previous state/page
    controller.next(); //if you wanna go to next state/page
    controller.move(1) /*e.g mean go to index 1, this can also be use to navigate to and from using controller.move(--index) or controller.move(++index)*/
  },

在这种情况下，这意味着您将同时为PREV和NEXT按钮定义onPress。

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

2 个答案: