美文网首页flutter dart
日更(三十五)-flutter-pageview

日更(三十五)-flutter-pageview

作者: Jlanglang | 来源:发表于2019-02-04 21:47 被阅读42次

瞎扯

大年三十,新年快乐.
趁着春晚唱歌的时间,瞎写一点.过年期间只能保持不断,算是写个标题,定个目录吧

PageView

直接看代码:

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectPage = 0;

  var _page = [
    new UserPager(),
    new GoodsPage(),
    new UserPager(),//目前就写了2个页面.这个凑个数
  ];

  var _bottom = [
    new BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text('首页'),
    ),
    new BottomNavigationBarItem(
      icon: Icon(Icons.shop),
      title: Text('2'),
    ),
    new BottomNavigationBarItem(
      icon: Icon(Icons.people),
      title: Text('3'),
    )
  ];

  var _pageController = new PageController(initialPage: 0);

  void _bottomSelect(index) {
    _pageController.animateToPage(index,
        duration: new Duration(milliseconds: 1000), curve: Curves.ease);
  }

  void _onPageChanged(index) {
    setState(() {
      _selectPage = index;
    });
  }

  ///主体内容
  Widget body() => PageView.builder(
        onPageChanged: _onPageChanged,
        controller: _pageController,
        itemBuilder: (BuildContext context, int index) {
          return _page[index];
        },
        itemCount: _page.length,
      );

  ///浮动按钮
  Widget float() => new FloatingActionButton(
        tooltip: 'Increment',
        child: new Icon(Icons.add),
        onPressed: () {
          Navigator.pushNamed(context, '123');
        },
      );

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: body(),
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
        floatingActionButton: float(),
        bottomNavigationBar: new BottomNavigationBar(
          items: _bottom,
          onTap: _bottomSelect,
          currentIndex: _selectPage,
        ));
  }
}

和Listview一样.也是使用的PageView.builder.

用这个也是一样.为了动态创建,这里我是写死了.

controller

这个就相当于控制页面显示的.比如跳转到第几页之类的.
看名字就知道.控制器的意思.常说的MVC中的C

   _pageController.animateToPage(index,
        duration: new Duration(milliseconds: 1000), curve: Curves.ease);
 

三个参数:index第几页,duration动画时间,curve加速器类型;

onPageChanged

这个就和android一样,页面切换时 的回调,

好了.就到这里

用起来还是很简单的.

就目前Flutter更的这些就已经能写一个简单的APP了.哈哈

相关文章

  • 日更(三十五)-flutter-pageview

    瞎扯 大年三十,新年快乐.趁着春晚唱歌的时间,瞎写一点.过年期间只能保持不断,算是写个标题,定个目录吧 PageV...

  • 日更【三十五】

    小兔子看见熊瞎子要走了,它连忙蹦蹦跳跳跳到熊瞎子面前,拦住它。 “你先别走。”小兔子急忙叫道。 熊瞎子是个温...

  • flutter-pageview

    类似iOS 的UIPageController 构建 构建row pagecontroller

  • 日更(四十四)-flutter-PageView的重绘问题

    瞎扯 昨天写了展开的ExpandIcon,在写的过程中,发现.pageview每次切换都会重新创建weight.不...

  • 日更三十五天

    耽搁了几天,现在继续。

  • 日更三十五天

    今天没有想写的东西,就想着怎么完成日更呢? 脑子里想了很多。想着要不凑凑字数吧?要不把以前写的东西再拿出来放进去?...

  • 日更三十五天

    累计日更三十五天了,文章一文继住的写得很烂,却也收获了不少粉丝,其实还是挺高兴的。 确实,有很多时候都感觉写不下去...

  • 日更三十五天

    “如果一定要确定一个“放手”的原则,我能给出的就是,在每一件具体事务面前,不要控制,要引导;不要太有痕迹,尽量无痕...

  • 日更三十五:做妈妈

    从怀孕到现在,买的育儿书不少,读进去的也不多,其实成功经验很难复制,毕竟孩子的情况,家庭的情况都是千差万别的。我也...

  • 日更之《成为作家》第二章

    日更第三十五天! 日更不是目的,日更只是为了促进自我的学习! 上回我们探讨了《成为作家》这本书中的第一章内容,讲述...

网友评论

    本文标题:日更(三十五)-flutter-pageview

    本文链接:https://www.haomeiwen.com/subject/mthmsqtx.html