Flutter 构建App基础框架

前言

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+控制器