如何在Flutter中使用animateTojump()进行网页浏览

时间:2019-09-21 07:51:31

标签: flutter flutter-animation

我正在更改单击按钮时的综合浏览量页面。页面可以完美地更改,但是没有动画。我使用了animateTopage()方法,但是没有动画在起作用。

我进行了类start_test。此类的布局具有综合浏览量。每当我单击任何卡片时,都会显示下一页而没有任何动画。

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.white,
  appBar: AppBar(
    backgroundColor: Colors.white,
    elevation: 1,
    iconTheme: IconThemeData(color: Colors.black),
    actions: <Widget>[
      Padding(
          padding: EdgeInsets.only(right: 60),
          child: Row(
            children: <Widget>[],
          ))
    ],
    title: Text(
      'Test',
      style: TextStyle(color: Colors.black),
    ),
  ),
  body: FutureBuilder<List<questions_data>>(
      future: _fetch_questions(),
      builder: (context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.none:
            return Text('Failed to connect');
          case ConnectionState.waiting:
            return Center(
                child: Text(
              'Loading',
              style: TextStyle(color: Colors.grey),
            ));
          case ConnectionState.done:
            if (snapshot.hasError) {
              return Center(
                child: InkWell(
                  child: Padding(
                    padding: const EdgeInsets.all(32.0),
                    child: Column(
                      children: <Widget>[
                        Text('Error in connection'),
                        Text('Tap to retry')
                      ],
                    ),
                  ),
                  onTap: () {
                    setState(() {
                      CircularProgressIndicator();
                    });
                  },
                ),
              );
            } else if (snapshot.hasData) {
              return Padding(
                padding: EdgeInsets.all(20),
                child: PageView.builder(
                    physics: AlwaysScrollableScrollPhysics(),
                    controller: _controller,
                    itemCount: snapshot.data.length,
                    itemBuilder: (ctx, i) {
                      return Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.only(
                              topRight: Radius.circular(10),
                              topLeft: Radius.circular(10),
                            ),
                            color: Colors.transparent,
                            border: Border.all(
                                color: Colors.grey.shade200, width: 1)),
                        child: ListView(
                          children: <Widget>[
                            Container(
                              decoration: BoxDecoration(
                                  color: Colors.grey.shade300,
                                  borderRadius: BorderRadius.only(
                                    topRight: Radius.circular(10),
                                    topLeft: Radius.circular(10),
                                  )),
                              height: 60,
                              child: Padding(
                                padding: EdgeInsets.all(15),
                                child: Center(
                                  child: Text(
                                    "Q",
                                    style: TextStyle(color: Colors.black),
                                  ),
                                ),
                              ),
                            ),
                            Container(
                              height: MediaQuery.of(context).size.height,
                              color: Colors.white,
                              child: Column(
                                children: <Widget>[
                                  Padding(
                                      padding: EdgeInsets.all(15),
                                      child: SingleChildScrollView(
                                        child: Text(
                                          'Flutter is Google’s mobile UI open source framework to build high-quality native (super fast) interfaces for iOS and Android apps with the unified codebase. build high-quality native (super fast) interfaces for iOS and Android apps with the unified codebase.',
                                          style: TextStyle(
                                              color: Colors.black,
                                              fontSize: 15),
                                        ),
                                      )),
                                  Padding(
                                    padding: EdgeInsets.all(5),
                                    child: Card(
                                        elevation: 2,
                                        child: SizedBox(
                                          width: MediaQuery.of(context)
                                              .size
                                              .width,
                                          child: InkWell(
                                            onTap: () {
                                              _controller.animateToPage(
                                                  i + 1,
                                                  duration: Duration(
                                                      microseconds: 600),
                                                  curve: Curves.ease);
                                            },
                                            child: Padding(
                                              padding: EdgeInsets.all(20),
                                              child: Text(
                                                snapshot.data[i].ans_one,
                                                style: TextStyle(
                                                    color: Colors.black),
                                              ),
                                            ),
                                          ),
                                        )),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.all(5),
                                    child: Card(
                                        elevation: 2,
                                        child: SizedBox(
                                          width: MediaQuery.of(context)
                                              .size
                                              .width,
                                          child: InkWell(
                                            onTap: () {
                                              _controller.animateToPage(
                                                  i + 1,
                                                  duration: Duration(
                                                      microseconds: 15000),
                                                  curve: Curves.ease);
                                            },
                                            child: Padding(
                                              padding: EdgeInsets.all(20),
                                              child: Text(
                                                snapshot.data[i].ans_two,
                                                style: TextStyle(
                                                    color: Colors.black),
                                              ),
                                            ),
                                          ),
                                        )),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.all(5),
                                    child: Card(
                                        elevation: 2,
                                        child: SizedBox(
                                          width: MediaQuery.of(context)
                                              .size
                                              .width,
                                          child: InkWell(
                                            onTap: () {
                                              _controller.animateToPage(
                                                  i + 1,
                                                  duration: Duration(
                                                      microseconds: 15000),
                                                  curve: Curves.ease);
                                            },
                                            child: Padding(
                                              padding: EdgeInsets.all(20),
                                              child: Text(snapshot
                                                  .data[i].ans_three),
                                            ),
                                          ),
                                        )),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.all(5),
                                    child: Card(
                                        elevation: 2,
                                        child: SizedBox(
                                          width: MediaQuery.of(context)
                                              .size
                                              .width,
                                          child: ***InkWell(
                                            onTap: () {
                                              _controller.animateToPage(
                                                  i + 1,
                                                  duration: Duration(
                                                      microseconds: 15000),
                                                  curve: Curves.ease);
                                            },***
                                            child: Padding(
                                              padding: EdgeInsets.all(20),
                                              child: Text(snapshot
                                                  .data[i].ans_four),
                                            ),
                                          ),
                                        )),
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      );
                    }),
              );
            }
            return Center(
              child: InkWell(
                child: Padding(
                  padding: const EdgeInsets.all(32.0),
                  child: Column(
                    children: <Widget>[
                      Text('Error in connection'),
                      Text('Tap to retry')
                    ],
                  ),
                ),
                onTap: () {
                  setState(() {
                    CircularProgressIndicator();
                  });
                },
              ),
            );
          default:
            return Text('Loading...');
        }
        ;
      }),
);

我希望墨水瓶通话时有动画。但是那里没有动画。

1 个答案:

答案 0 :(得分:0)

问题出在这里

_controller.animateToPage(
   i + 1,
   duration: Duration(
   microseconds: 600),
   curve: Curves.ease,
);

在这里,您使用microseconds作为持续时间,这是最小的时间单位。它正在设置动画,但由于时间太短,因此动画不可见。 请尝试将其转换为millisecondsseconds