日更(三十五)-flutter-pageview

瞎扯

大年三十,新年快樂.
趁著春晚唱歌的時間,瞎寫一點.過年期間只能保持不斷,算是寫個標(biāo)題,定個目錄吧

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個頁面.這個湊個數(shù)
  ];

  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;
    });
  }

  ///主體內(nèi)容
  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.

用這個也是一樣.為了動態(tài)創(chuàng)建,這里我是寫死了.

controller

這個就相當(dāng)于控制頁面顯示的.比如跳轉(zhuǎn)到第幾頁之類的.
看名字就知道.控制器的意思.常說的MVC中的C

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

三個參數(shù):index第幾頁,duration動畫時間,curve加速器類型;

onPageChanged

這個就和android一樣,頁面切換時 的回調(diào),

好了.就到這里

用起來還是很簡單的.

就目前Flutter更的這些就已經(jīng)能寫一個簡單的APP了.哈哈


交流群:493180098,這是個很少吹水,交流學(xué)習(xí)的群.
APP開發(fā)維護(hù)咨詢?nèi)?: 492685472 ,承接APP迭代.開發(fā)維護(hù).咨詢業(yè)務(wù),付費快速解決問題.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容