美文网首页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

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