跨平台开发Flutter初体验

栏目: IOS · Android · 发布时间: 4年前

内容简介:Flutter的横空出世,很大程度上降低了移动应用的开发成本;我是一名苦逼的iOS开发者,兼职写点Android开发,对Flutter的出现比一般人要敏感很多,在此之前个人的看法是跨平台没什么前景,学习成本高的同时,性能并不是很满意;在接触Flutter之后,这一想法抛之脑后,瞬间来了兴趣,对于有开发经验的童鞋来说,学习起来一点也不难,特别是Android开发的,因为编译器可以直接用Android Studio,上手特别快;运行起来也很流畅;这些都是爱好的开始;首先来说一下iOS里面的UITabBarCon

Flutter的横空出世,很大程度上降低了移动应用的开发成本;我是一名苦逼的iOS开发者,兼职写点Android开发,对Flutter的出现比一般人要敏感很多,在此之前个人的看法是跨平台没什么前景,学习成本高的同时,性能并不是很满意;在接触Flutter之后,这一想法抛之脑后,瞬间来了兴趣,对于有开发经验的童鞋来说,学习起来一点也不难,特别是Android开发的,因为编译器可以直接用Android Studio,上手特别快;运行起来也很流畅;这些都是爱好的开始;

首先来说一下iOS里面的UITabBarController 在Flutter里面有对应的控件BottomNavigationBar非常的方便,几句代码轻轻松松达到iOS和Android双端效果统一,主要代码如下

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/HomePage.dart';
import 'package:flutter_app/pages/ShopPage.dart';
import 'package:flutter_app/pages/MyInfoPage.dart';


class Tabbar extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => TabbarState();
}
///tabbar的三个子控制器
class TabbarState extends State<Tabbar> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    HomePage(),
    Shoppage(),
    MyInfoPage()
  ];

//创建BottomNavigationBar并且监听改变的currentIndex
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        items: [
          BottomNavigationBarItem(
              title: new Text("Home"), icon: new Icon(Icons.home)),
          BottomNavigationBarItem(
              title: new Text("List"), icon: new Icon(Icons.list)),
          BottomNavigationBarItem(
              title: new Text("Message"), icon: new Icon(Icons.message)),
        ],
      ),
    );
  }
//点击事件
  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

复制代码

Tabbar 是自己创建封装的类,方便组件化管理;主要是实现tabbar的功能 cupertino.dartmaterial.dart 是Flutter自带的文件;其他 HomePage.dart / ShopPage.dart / MyInfoPage.dart 为自己创建的三个类,相当于iOS里面的 VC 和Android里面的 Activity 用于展示TabbarItem的内容;至于怎么调用就更加的简单了,下面是Main文件调用的代码:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //调用tabbar展示
      home: Tabbar(),
    );
  }
}
复制代码

调用的代码 home: Tabbar(), 就是这么简单粗暴,核心代码不超过50行; 效果图如下

跨平台开发Flutter初体验
跨平台开发Flutter初体验

上图中填充的其他内容想了解的可以关注我哦, 连载中。。。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Java 语言导学

Java 语言导学

Mary Campione Kalrath Alison Huml / 机械工业 / 2003-1 / 39.00元

《Java 语言导学(原书第3版)》既适合初学者,也适合有经验的程序员:新程序员通过从头到尾阅读《Java 语言导学(原书第3版)》可以得到最大的收获,包括按照第1章“起步”中的步骤说明编译和运行自己的第一个程序。有过程式语言(比如C)经验的程序员可能希望从Java编程语言的面向对象概念和特性开始学习。 有面向对象编程经验的程序员可能希望先学习更高级的内容。一起来看看 《Java 语言导学》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器