前言
Flutter相对OC来说，代码精简很多，目标文件也少了很多，下面我们通过代码一一讲解如何利用flutter去搭建一个App的基础壳子，核心需要理解和注意的有MaterialApp()、Scaffold()、appBar: AppBar( )、Column、Row、bottomNavigationBar等核心组件。具体用法和介绍看下列代码和注释。
import 'package:flutter/material.dart'; // 导入文件样式
import './widgets/tabBar_widget.dart'; // 导入自定义文件
// main函数和OC一样，都是程序的入口
void main() => runApp(ShopkeeperApp()); // 如果函数中只有一行方法的调用，可以去掉{}用=>指向即可
class ShopkeeperApp extends StatelessWidget { //
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // DEBUG条幅隐藏
home: Home(), // 首页显示内容
// 设置主题颜色
theme: ThemeData(
// 导航条颜色
primaryColor: Colors.cyan,
// 设置按钮点击时的水波纹
highlightColor:
Color.fromRGBO(255, 255, 255, 0.5), //设置点击时的背景色为白色，透明度为0.5
splashColor: Colors.white70, // 点击按钮时的水波纹颜色为白色不透明
),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController( // 相当于OC中baseController
length: 4, // 设置4个根控制器
child: Scaffold(
appBar: AppBar( // 设置导航条
title: Text( // 导航条标题
'智掌柜',
style: TextStyle( // 文案样式
color: Colors.white,
fontSize: 18.0
),
),
),
// body: TabBarView(children: [
//
// ]),
body: Center( // body是整个控制器中要显示的内容
child: Column( // Column是纵向显示 Row是横向显示
children: [
Text("这个是字符串标签，相当于OC中的Label"),
SizedBox(
height: 10,
),
Text("这个是字符串标签，相当于OC中的Label"),
SizedBox(
height: 10,
),
Text("这个是字符串标签，相当于OC中的Label"),
],
),
),
bottomNavigationBar: setBottomNavigationBar(), // 设置tabBar样式
),
);
}
}
- 其中
setBottomNavigationBar()函数是自定义文件中的方法，内容就是设置底部餐单栏的样式和内容。具体查看下来代码。
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
// 这里要注意下StatefulWidget合StatelessWidget的写法
class setBottomNavigationBar extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _createBottomNavigationBarItem();
}
}
// _开头的就是私有方法
class _createBottomNavigationBarItem extends State<setBottomNavigationBar> {
int _CurrentIndex = 0; // 默认选中第0个控制器
void _onTapHandle(int index) { // 点击对应的index
setState(() {
print('您点击的是：{$index}'); // flutter的打印方式
_CurrentIndex = index; // 点击后的赋值
});
}
@override
Widget build(BuildContext context) {
return BottomNavigationBar( // BottomNavigationBar就是底部菜单栏的样式组件
currentIndex: _CurrentIndex, // 当前显示的索引
onTap: _onTapHandle,// onTapitem的电机事件
type: BottomNavigationBarType.fixed, // type表示固定显示在底部
items: [ // 设置tabBar的item
BottomNavigationBarItem(icon: Icon(Icons.explore),label: 'Explore'),// BottomNavigationBarItem 具体的某个item的设置
BottomNavigationBarItem(icon: Icon(Icons.history),label: 'History'),
BottomNavigationBarItem(icon: Icon(Icons.list),label: 'List'),
BottomNavigationBarItem(icon: Icon(Icons.person),label: 'Persion'),
],
);
}
}
导航条+底部tabBar+控制器
