Flutter入门笔记

最新推荐文章于 2024-09-07 08:37:35 发布
最新推荐文章于 2024-09-07 08:37:35 发布
阅读量166 收藏
点赞数
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/isusjjyy/article/details/93196583
版权
这篇博客介绍了Flutter的入门知识，包括main.dart入口点的设置，详细讲解了如何实现底部导航栏切换和标题切换，特别是用图片作为Icon的方式，并简要提到了路由的两种跳转方式——普通路由和命名路由及其参数传递。
摘要由CSDN通过智能技术生成

1. main.dart入口

// 自带样式类库
import 'package:flutter/material.dart';

// 入口函数
void main() => runApp(MyApp());

// 入口widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /* 
     * Material应用程序以MaterialApp widget开始 
     * 该widget在应用程序的根部创建了一些有用的widget，
     * 比如一个Theme配置了应用的主题,home配置初始页面
     * */
    return new MaterialApp(
      title:"首页",
      home:Home()
    );
  } 
}

// 初始页面类
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("首页"),
    );
  }
}

 

欢迎加群讨论更多flutter相关问题(7天有效）如果失效，可加个人微信拉群

2. 底部导航栏切换及标题切换

BottomNavigationBar：

items：底部导航栏的显示项，

onTap：点击导航栏子项时的回调，

currentIndex：当前显示项的下标（默认从0开始），

type：底部导航栏的类型，有fixed和shifting两个类型，显示效果不一样，

fixedColor：底部导航栏type为fixed时导航栏的颜色，如果为空的话默认使用ThemeData.primaryColor，

iconSize：BottomNavigationBarItem icon的大小

// 自带样式类库
import 'package:flutter/material.dart';

// 入口函数
void main() => runApp(MyApp());

// 入口widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /* 
     * Material应用程序以MaterialApp widget开始 
     * 该widget在应用程序的根部创建了一些有用的widget，
     * 比如一个Theme配置了应用的主题,home配置初始页面
     * */
    return new MaterialApp(
      title:"首页",
      home:Application()
    );
  } 
}

// 应用程序入口
class Application extends StatefulWidget {
  @override
  _ApplicationState createState() => _ApplicationState();
}

class _ApplicationState extends State<Application> {
  // 当前底部导航显示的索引页面
  int _currentIndex = 0;
  // 页面内容数组
  List <Widget> _bodyList = [
    HomePage(),
    SettingPage()
  ];
  // 底部显示的项
  List <BottomNavigationBarItem> _bottomTabBarList = [
    BottomNavigationBarItem(
      icon:Icon(Icons.home),
      title: Text("首页")
    ),
    BottomNavigationBarItem(
      icon:Icon(Icons.settings),
      title: Text("设置")
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 当前页面标题
        title:this._bottomTabBarList[this._currentIndex].title
      ),
      body:this._bodyList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: this._bottomTabBarList,
        currentIndex: this._currentIndex,
        // 点击事件
        onTap: (int index)=>{
          setState(()=>{
            this._currentIndex = index 
          })
        },
      ),
    );
  }
}

// 首页
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  
  @override
  Widget build(BuildContext context) {
    return Container(
      child:Center(
        child:Text("首页")
      )
    );
  }
}

// 设置页面
class SettingPage extends StatefulWidget {
  @override
  _SettingPageState createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  
  @override
  Widget build(BuildContext context) {
    return Container(
      child:Center(
        child:Text("设置页面")
      )
    );
  }
}

2.1 底部导航栏使用图片Icon模式

先在pubspec.yaml配置静态资源文件：

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
      - assets/images/ic_tab_home_normal.png
      - assets/images/ic_tab_subject_normal.png
      - assets/images/ic_tab_profile_normal.png
import 'package:flutter/material.dart';

// 入口函数
void main() => runApp(MyApp());

// 入口widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /* 
     * Material应用程序以MaterialApp widget开始 
     * 该widget在应用程序的根部创建了一些有用的widget，
     * 比如一个Theme配置了应用的主题,home配置初始页面
     * */
    return new MaterialApp(
      title:"应用程序标题",
      home:Application()
    );
  } 
}

class Application extends StatefulWidget {
  @override
  _ApplicationState createState() => _ApplicationState();
}

class _ApplicationState extends State<Application> {
  int _currentIndex = 0;
  List<Widget> _bodyList = [
    HomePage(),
    MediaPage(),
    MinePage()
  ];
  List<BottomNavigationBarItem> _bottomNavBarItemList = [
    BottomNavigationBarItem(
      icon:Image.asset(
        'assets/images/ic_tab_home_normal.png',
        width:30.0,
        height:30.0
      ),
      title:Text(
        "首页",
        style:TextStyle(
          fontSize: 10.0
        )
      ),
      activeIcon: Image.asset(
        'assets/images/ic_tab_home_active.png',
        width:30.0,
        height:30.0
      ),
    ),
    BottomNavigationBarItem(
       icon:Image.asset(
        'assets/images/ic_tab_subject_normal.png',
        width:30.0,
        height:30.0
      ),
      title:Text(
        "媒体",
        style:TextStyle(
          fontSize: 10.0
        )
      ),
      activeIcon: Image.asset(
        'assets/images/ic_tab_subject_active.png',
        width:30.0,
        height:30.0
      ),
    ),
     BottomNavigationBarItem(
       icon:Image.asset(
        'assets/images/ic_tab_profile_normal.png',
        width:30.0,
        height:30.0
      ),
      title:Text(
        "我的",
        style:TextStyle(
          fontSize: 10.0
        )
      ),
      activeIcon: Image.asset(
        'assets/images/ic_tab_profile_active.png',
        width:30.0,
        height:30.0
      ),
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:this._bottomNavBarItemList[this._currentIndex].title
      ),
      body:this._bodyList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: this._bottomNavBarItemList,
        currentIndex: this._currentIndex,
        onTap:(int index){
          setState((){
            this._currentIndex = index;
          });
        },
        type:BottomNavigationBarType.fixed,
        fixedColor:Colors.green
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child:Center(child: Text("首页"),)
    );
  }
}

// 媒体页面
class MediaPage extends StatefulWidget {
  @override
  _MediaPageState createState() => _MediaPageState();
}

class _MediaPageState extends State<MediaPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child:Center(child: Text("媒体页面"),)
    );
  }
}

// 我的页面
class MinePage extends StatefulWidget {
  @override
  _MinePageState createState() => _MinePageState();
}

class _MinePageState extends State<MinePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child:Center(child: Text("我的页面"),)
    );
  }
}

3. 普通路由跳转及带参数跳转

// 自带样式类库
import 'package:flutter/material.dart';

// 入口函数
void main() => runApp(MyApp());

// 入口widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /* 
     * Material应用程序以MaterialApp widget开始 
     * 该widget在应用程序的根部创建了一些有用的widget，
     * 比如一个Theme配置了应用的主题,home配置初始页面
     * */
    return new MaterialApp(
      title:"首页",
      home:HomePage()
    );
  } 
}

// 首页
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("首页")
      ),
      body:Center(
        child:RaisedButton(
          child:Text("跳转到详情页1"),
          onPressed: ()=>{
            Navigator.of(context).push(
              MaterialPageRoute(
                // 当做参数传递
                builder: (context)=> DetailPage(id:1)
              )
            )
          },
        )
      )
    );
  }
}

class DetailPage extends StatefulWidget {
  int id;
  DetailPage({this.id=0});
  @override
  _DetailPageState createState() => _DetailPageState(id);
}

class _DetailPageState extends State<DetailPage> {
  int id;
  _DetailPageState(this.id);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("详情页")
      ),
      body: Center(
        child: Text("当前页面id=${id}"),
      ),
    );
  }
}

4. 命名路由跳转及传值

// 自带样式类库
import 'package:flutter/material.dart';

// 入口函数
void main() => runApp(MyApp());

// 入口widget
class MyApp extends StatelessWidget {
  final routes = {
    "home":(context)=>HomePage(),
    "detail":(context,{arguments})=>DetailPage(arguments:arguments),
  };
  @override
  Widget build(BuildContext context) {
    /* 
     * Material应用程序以MaterialApp widget开始 
     * 该widget在应用程序的根部创建了一些有用的widget，
     * 比如一个Theme配置了应用的主题,home配置初始页面
     * */
    return new MaterialApp(
     initialRoute: 'home',
     onGenerateRoute: (RouteSettings settings){
       // 统一处理
       final String routeName = settings.name;
       final Function pageContainerBuilder = this.routes[routeName];
       print(routeName);
       if(pageContainerBuilder != null){
         if(settings.arguments != null){
            final route = MaterialPageRoute(
              builder:(context)=>pageContainerBuilder(context,arguments:settings.arguments)
            );
            return route;
         }else{
           final route = MaterialPageRoute(
              builder:(context)=>pageContainerBuilder(context)
            );
            return route;
         }
       }
     },
    );
  } 
}

// 首页
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("首页")
      ),
      body:Center(
        child:RaisedButton(
          child:Text("跳转到详情页1"),
          onPressed: (){
            Navigator.pushNamed(context,"detail", arguments: {"id":1});
          },
        )
      )
    );
  }
}

// 详情页面
class DetailPage extends StatefulWidget {
  final arguments;
  DetailPage({this.arguments});
  @override
  _DetailPageState createState() => _DetailPageState(arguments:arguments);
}

class _DetailPageState extends State<DetailPage> {
  final arguments;
  _DetailPageState({this.arguments});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("详情页")
      ),
      body: Center(
        child: Text("当前页面id=${arguments != null ? arguments['id'] : 0}"),
      ),
    );
  }
}

 

郭文武
关注
专栏目录
Flutter 学习之路（七）main.dart
WangQingLei0307的博客
05-07 1651
今天我们来讲解一下main.dart，main.dart可以说应用运行起来的第一个类，在这里我们需要根据功能需要，可以做很多事情，例如：应用跳转的第一个页面，推送、地图等的注册，都可以在这里实现。 今天我先来讲一下基本使用，就是页面的跳转，例如：首次登录跳转到登录页面等等，有了首个操作页面我们才能更好的往下进行。我们先来看一下创建Flutter项目时代的源码 import 'package:flutter/material.dart'; void main() { //这里我们可以初始化各种数据
Flutter基础学习笔记.pdf
01-15
Flutter 基础学习笔记 Flutter 是 Google 推出的移动应用程序开发框架，使用 Dart 编程语言，可以跨平台运行在 Android 和 iOS 设备上。下面是 Flutter 基础学习笔记的知识点总结。 一、环境准备 1. 下载 ...
Flutter(二)——解析main.dart源码
热门推荐
李元静
12-26 1万+
本文目录解析Flutter项目main.dart源码MyApp解析MyHomePage 解析_MyHomePageState 解析 解析Flutter项目main.dart源码 经过本专栏的第一篇博文之后，相信大家对于Flutter的易开发性以及部署开发环境都有了一定的了解，那么今天我们主要接着上一篇的博文讲解，为什么main.dart的代码显示了上篇博文的界面，所以我们先来一步一步分析main....
Flutter Step By Step 项目教程
最新发布
gitblog_00418的博客
09-07 335
Flutter Step By Step 项目教程 Flutter-StepByStepA example of an Android / iOS app written using Google Flutter with MVP architecture项目地址:https://gitcode.com/gh_mirrors/fl/Flutter-StepByStep 本教程旨在指导您了解并快速...
Flutter 四：main.dart简单介绍
weixin_41648633的博客
01-03 470
main.dart简单介绍 运行结果
【Flutter手摸手教学】03 Flutter main.dart详细说明
weixin_54711019的博客
02-21 1078
上一次我们创建了一个最简单的Flutter App，在第一个页面上显示了一个你好，Flutter文字。今天我们来详细说一下里面的每一行代码。 一、打开lib\main.dart 二、代码详细说明 导包 //导入material.dart，material.dart是Android风格的UI组件库，同样还有ios风格的UI组件库 import 'package:flutter/material.dart'; 入口main函数 //main方法是整个app的入口 void main() {
面试中被问及Flutter main.dart 的用途
qingmuyun的博客
03-27 265
在 Flutter 项目中，main.dart 文件是项目的入口点。它包含了应用程序的主函数，这个 主函数是应用程序的启动点。
Notes-Flutter:笔记应用
03-28
笔记一个新的Flutter项目。... 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门：要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
Flutter学习资料
06-13
总之，通过这份“Flutter学习资料”，你可以系统地学习到Flutter从入门到进阶的全部知识，包括Dart语言、Flutter框架、组件使用、状态管理、动画实现、第三方库的集成等方面。在实践中不断探索，结合视频教程和文字...
papership-flutter:笔记式网路应用程式的动态执行
03-14
文书船 一个新的Flutter项目。 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，...要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
Android原生项目引入Flutter.zip
03-10
同时，手册内容深入浅出，既适合新手入门，也能为老手提供有价值的参考。 二、项目实战与练习 为了让学习者能够将理论知识与实践相结合，我们特别准备了项目实战与练习部分。这部分内容包含了多个精心设计的...
Flutter基础语法
Uncle_wangcode的博客
04-27 1270
一文带你学习flutter基础组件。
「 Flutter 项目实战 」设计企业级项目入口 main.dart 设计与实现 ( GSYGithubApp 源码解读·二 )
圆号本号
03-24 1220
???? 提示：温馨提示一下哈，这篇文章主要是针对 GitHub 上 12+k 顶级项目「 CarGuo/gsy_github_app_flutter 」 的源码解读，因为这是我目前见过最棒、最具有企业级水平的 Flutter 开源项目，整个项目的设计令我倾佩，所以我希望与大家一起分享它 ???? 注意：我并非什么大神，只是一个热爱分享，并希望带大家一起进步的码者，所以我也无法保证本文的方案就一定是最好的，如果有更好的方案，也希望大家在评论区分享。那么与君共勉，我们开始吧 ～ 一、前言 初始化 F
main.dart flutter 默认代码
我的博客，不一样的自我表达
06-19 76
关注我的博客，您将在其中获得提示、技巧和挑战，以保持您的技能敏锐。
Flutter开发之Dart语言-Dart语言类型定义typedef
亢少军的博客
01-15 7007
防采集标记：亢少军老师的课程和资料 类型定义Typedef 在Dart中，函数是对象，就像string和int一样，typedef或为函数类型提供了在声明字段和返回类型时可以使用的名称。当函数类型分配给变量时，typedef会保留类型信息。 class SortedCollection { Function compare; SortedCollection(int f(Obje...
Flutter 修改 切换 主工程入口 main文件
wenqiang0718的专栏
06-03 7646
Flutter默认运行main.dart文件，但是如果我想让别的文件为主工程文件呢？？如下以Android Studio为例： 1.在右上角找到运行工程文件的快捷图标，记住您所想要修改的主工程文件名称 2.打开上图1所标注的main.dart选项，选择Edit Configurations... 3.在弹出的新窗口中，选择左上角的加号+ 4.选择Flutter 5.切换到新增...
Flutter(二) 创建第一个Flutter App
VoidHope的博客
03-29 5556
这一章主要是创建一个Flutter App。如果你熟悉面向对象编程，有基本的编程概念（变量，循环，条件判断等），那么你不必要具备原有的Dart和移动开发经验，，就可以轻松地理解完成这章内容。 Step 1：创建第一个flutter app Step 2：使用外部包 Step 3：添加一个有状态的组件（Stateful widget） Step 4：创建无限滚动ListView Step 5：添...
Flutter 入门
kmyhy的专栏
07-05 1万+
原文：Getting Started with Flutter 作者：Joe Howard 译者：kmyhy 自从十多年前 iOS 和 Android 平台爆发性增长，移动开发界的目标就转向了跨平台开发。只需同时为 iOS 和 Android 编写一个 app 这一点能节省公司和团队的大量时间和工作。 快平台开发的工具近年来出现了许多，比如 Adobe 基于 web 的 ...
Flutter 入门代码
05-08
Flutter 入门代码如下： ``` import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值