Flutter之中级Widget

跳转页面

1.Navigator.push：是跳转到下一个页面，它要接受两个参数一个是上下文context，另一个是要跳转的函数。

      Navigator.of(context).push(new MaterialPageRoute(builder: (context) {
        return new MainPage();
      }));

跳转传递参数：

Navigator.push(
  context, 
  MaterialPageRoute(
    builder:(context)=>new ProductDetail(data)
  )
);

2.Navigator.pop：是返回到上一个页面，使用时传递一个context（上下文）参数，使用时要注意的是，你必须是有上级页面的，也就是说上级页面使用了Navigator.push。

BottomNavigationBar

属性一览：

BottomNavigationBar({
    Key key,
    @required this.items,
    this.onTap,
    this.currentIndex = 0,
    this.elevation = 8.0,
    BottomNavigationBarType type,
    Color fixedColor,
    this.backgroundColor,
    this.iconSize = 24.0,
    Color selectedItemColor,
    this.unselectedItemColor,
    this.selectedIconTheme = const IconThemeData(),
    this.unselectedIconTheme = const IconThemeData(),
    this.selectedFontSize = 14.0,
    this.unselectedFontSize = 12.0,
    this.selectedLabelStyle,
    this.unselectedLabelStyle,
    this.showSelectedLabels = true,
    bool showUnselectedLabels,
  })

items是必须的参数，为BottomNavigationBarItem类型，需设置icon和text。onTap处理点击事件，可设置选中、未选中的字体大小和颜色。currentIndex：当前那个 tab 是 active 状态的。

示例:

class MainPage extends StatefulWidget {
  MainPage({Key key}) : super(key: key);

  _MyAppState createState() => _MyAppState();

}

class _MyAppState extends State<MainPage> {
  // This widget is the root of your application.
  int _currentIndex = 0;

  List<Widget> _pageList = [
    HomePage(),  //页面1
    XiguaPage(), //页面2
    MinePage(),  //页面3
  ];

  List<BottomNavigationBarItem> bottomItems = [
    BottomNavigationBarItem(
        icon: Icon(Icons.home, color: Colors.black54),
        activeIcon: Icon(Icons.home, color: Colors.red),
        title: Text("首页", style: TextStyle(fontSize: 12))
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.video_call_rounded, color: Colors.black54),
        activeIcon: Icon(Icons.video_call_rounded, color: Colors.red),
        title: Text("西瓜视频", style: TextStyle(fontSize: 12))
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.account_circle_rounded, color: Colors.black54),
        activeIcon: Icon(Icons.account_circle_rounded, color: Colors.red),
        title: Text("我的", style: TextStyle(fontSize: 12))
    )
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          selectedFontSize: 14,
          unselectedFontSize: 12,
          selectedItemColor: Colors.red,
          currentIndex: _currentIndex,
          type: BottomNavigationBarType.fixed,
          items: bottomItems,
          onTap: (int index) {
            setState(() {
              this._currentIndex = index;
            });
          },
        ),
      ),
    );
  }

}

AppBar+AppBarView

在Android中实现Tablayout+Viewpager的效果，Flutter中也必须有。

TabBar(
                controller,  
                isScrollable,  //是否开启滚动
                labelColor,  //选中文字颜色
                unselectedLabelColor,  //未选中文字颜色
                indicatorColor,  //指示器颜色
                tabs: ,  //tab文字内容
              ) 

TabBarView(
                controller,
                children,
              )

children为子页面的数组。

然后通过一个公共的TabController(length: tabs.length, vsync: this)，来实现联动。

示例：

class HomePageContent extends StatefulWidget {
  HomePageContent({Key key, this.title}) : super(key: key);

  final String title;

  @override
  HomePageContentState createState() => HomePageContentState();
}

class HomePageContentState extends State<HomePageContent>
    with SingleTickerProviderStateMixin {
  List tabs = ["关注", "推荐", "热榜", "要闻", "新时代", "抗疫"];
  TabController tabController;
  var topBarHeight = 65;

  @override
  void initState() {
    super.initState();
    tabController = new TabController(length: tabs.length, vsync: this);
    tabController.addListener(() {
      var index = tabController.index;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Container(
        child: Stack(
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.red,
              height: 85,
              padding: const EdgeInsets.only(left: 16, bottom: 2, right: 16),
              child: HomeSearchView(),
            ),
            Container(
              margin: const EdgeInsets.only(top: 130),
              child: TabBarView(
                controller: tabController,
                children: [
                  HomepageSubpage(),
                  HomepageSubpage(),
                  HomepageSubpage(),
                  HomepageSubpage(),
                  HomepageSubpage(),
                  HomepageSubpage(),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 85),
              child: TabBar(
                controller: tabController,
                isScrollable: true,
                labelColor: Colors.red,
                unselectedLabelColor: Colors.black87,
                indicatorColor: Colors.red,
                tabs: [
                  Tab(text: "关注"),
                  Tab(text: "推荐"),
                  Tab(text: "热榜"),
                  Tab(text: "要闻"),
                  Tab(text: "新时代"),
                  Tab(text: "抗疫"),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}