用 Flutter 搭建标签+导航框架

你要经常写 Swift 几乎我们不用去考虑这个问题除了一些第三方的引用，但在 Flutter 中我么你需要考虑，就像我们刚开始使用 OC 开发iOS的时候一样，当然关键字还是我们熟悉的 import 具体的我们根据上面的文件层级关系往下看看，比如说我们在 Demo 中有建立一个和 main 平级的 TabsPage，我们引用的时候是下面这样的：

1
2
/// 导入一个和自己平级的文件
import ‘TabsPage.dart’;
那在比如说，在 home 文件夹下有一个 HomePage.dart ,那我们是否还能直接像上面那样直接去引用呢？，答案是不能的，我们性需要带上的所属的文件，具体的如下：

/// 导入四个我们自己创建的文件
import ‘home/HomePage.dart’;
import ‘around/AroundPage.dart’;
import ‘mine/MinePage.dart’;
import ‘service/ServicePage.dart’;
上面这个点留意一下就可以了，怕有小伙伴和我一样刚开始学搞错它。

BottomNavigationBar

  这个控件的作用就和我们UIKit里面的UITabBarController 类似，和SwiftUI中的TabView一样，说说它具体的一些属性：







  我们再看看我们在项目Demo里面的具体的使用

import ‘package:flutter/material.dart’;

/// 导入四个我们自己创建的文件
import ‘home/HomePage.dart’;
import ‘around/AroundPage.dart’;
import ‘mine/MinePage.dart’;
import ‘service/ServicePage.dart’;

class TabsPage extends StatefulWidget {
TabsPage({Key key}) : super(key: key);
@override
_TabsPageState createState() => _TabsPageState();
}

class _TabsPageState extends State {
/// 当前选中的 index
int currentIndex = 0;

///
List listTabs = [
HomePage(),
AroundPage(),
ServicePage(),
MinePage(),
];

@override
Widget build(BuildContext context) {
return Scaffold(
///
body: this.listTabs[this.currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this.currentIndex,
iconSize: 24.0,
type: BottomNavigationBarType.fixed,
onTap: (index) {
setState(() {
this.currentIndex = index;
});
},
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: ‘首页’),
BottomNavigationBarItem(icon: Icon(Icons.category), label: ‘周边’),
BottomNavigationBarItem(icon: Icon(Icons.send_rounded), label: ‘服务’),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: ‘我的’),
],
/// 选中的颜色
fixedColor: Colors.blue,
),
);
}
}

  这里和我们iOS常见的是有点区别的，iOS在NavigationBarItem控制的一般都是导航控制器，我们在这里控制的等于直接是相应的控制器，然后每个控制器去管理自己的导航，有点安卓的味道，这样不错其实！具体的使用看上面的代码，我们注释写的也比较详细，我们就不在具体的解释了。

AppBar

  没错，我们的导航来了，先看看它的具体的一些属性：

AppBar({
Key key,
this.leading,//导航条左侧需要展示的Widget
this.automaticallyImplyLeading = true,
this.title,//导航条的标题
this.actions,//导航条右侧要展示的一组widgets
this.flexibleSpace,
this.bottom,//导航条底部需要展示的widget
this.elevation,
this.shape,//导航条样式
this.backgroundColor,//导航条背景色
this.brightness,//设置导航条上面的状态栏的dark、light状态
this.iconTheme,//导航条上的图标主题
this.actionsIconTheme,//导航条上右侧widgets主题
this.textTheme,//导航条上文字主题
this.primary = true,//为false的时候会影响leading，actions、titile组件，导致向上偏移
this.centerTitle,//导航条表示是否居中展示
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
this.toolbarOpacity = 1.0,
this.bottomOpacity = 1.0,
})
还有一个我们得了解一下 Scaffold ，Scaffold 是 Material library 中提供的一个 Widget, 它提供了默认的导航栏、标题和包含主屏幕 Widget 的body属性。 这里的关系就有点iOS中NaController 和 NaBar 的关系了。

  我们还是具体看看我们是怎么使用的：

Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: Text(“周边”),
),
);
}
复杂点的我们后面遇到了在总结，既然提到了导航那就得说一下界面之间的跳转了，我们看看像上面gif中的挑战效果我们是怎么做的，我们使用的是 Navigator 的 push方法了，看着是不是很眼熟，是不是觉得 Navigator 会有一个 pop方法，还真有！这个就比较舒服了。

  在我们的Demo中，我们是直接在push方法里面写了具体的页面的内容的在，这个正常肯定是另一个 Widget 的,相信应该明白的，我们看我们具体的代码：

// 跳转方法
void _pushSaved() {

Navigator.of(context).push(
  new MaterialPageRoute(
    builder: (context) {
      final tiles = _saved.map(
        (pair) {
          return new ListTile(
            title: new Text(pair.asPascalCase, style: _biggerFont),
          );
        },
      );

      final divided = ListTile.divideTiles(
        context: context,
        tiles: tiles,
      ).toList();

      return new Scaffold(
        appBar: new AppBar(
          title: new Text('保存的单词'),
        ),
        body: new ListView(children: divided),
      );
    },
  ),
);

}
USB Microphone https://www.soft-voice.com/
Wooden Speakers https://www.zeshuiplatform.com/
亚马逊测评 www.yisuping.cn
深圳网站建设www.sz886.com