flutter dart

日更(三十五)-flutter-pageview

2019-02-04  本文已影响42人  Jlanglang

瞎扯

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

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了.哈哈

上一篇 下一篇

猜你喜欢

热点阅读