Flutter入门

最新推荐文章于 2024-05-01 11:57:28 发布
最新推荐文章于 2024-05-01 11:57:28 发布
阅读量1k 收藏 15
点赞数 31
文章标签： flutter 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45575632/article/details/137868105
版权

Flutter入门

调试Flutter

  1. 查看可用设备 flutter devices
  2. 运行flutter在相关设备 flutter run

一.App结构

  • pMaterialApp 包含app的基本骨架
  • Scaffold 包含app的脚手架

MaterialApp

  • title (任务管理器中的标题)
  • home(主内容)
  • debugShowCheckedModeBanner (是否显示左上方调试标记)

Scaffold

  • appBar (应用头部)
  • body (应用主体)
  • floatingActionButton (浮动按钮)
  • drawer (左侧抽屉菜单）
  • endDrawer (右侧抽屉菜单)
  • bottimNavigationBar (底部导航栏)

image-20231114191541207

二.文本组件

  • Text
    • TextDirection (文本方向)
    • TextStyle (文本样式)
      • Colors (文本颜色)
      • FontWeight (文字粗细)
      • FontStyle (文本样式)
    • TextAlign (文本对齐)
    • TextOverflow (文本溢出)
    • maxLines (指定显示的行数)
  • RichText与TextSpan (一般配合使用—给一段文本采用不同的样式)

三.自定义字体

image-20231114202659088

image-20231114202725050

在flutter根目录下创建fonts文件夹,将字体文件放入

在pubspec.yaml中声明字体

在lib文件夹下的MaterialApp中

  • 为整个应用设置字体

MaterialApp(
	theme: ThemeData(fontFamily: "配置的名字")
)

  • 局部设置字体

Text(
	theme: ThemeData(fontFamily: "配置的名字")
)

四.常用Icon

Icon(Icon.具体名称)

Icon在线网站

五.Color

采用ARGB来声明颜色

const Color(0xFF42A5F5); //16进制的ARGB = 透明度 + 六位十六进制颜色

const Color.fromARGB(0xFF,0x42,0xA5,0xF5);

const Color.fromARGB(255,66,165,245);

const Color.fromRGBO(66,165,245,1.0);

六.Container

盒子模型

  • child (声明子组件)
  • padding (margin)
    • EdgeInsets (all()、fromLTRB()、only()) —边缘填充
  • decoration (修饰盒子模式)
    • BoxDecoration(边框、圆角、渐变、阴影、背景色、背景图片)
  • alignment (对盒子里面的内容进行对齐的)
    • Alignment (内容对齐)
  • tramsform (变形)
    • Matrix4(平移-translate、旋转-rotate、缩放-scale、斜切-skew)

七.线性布局

  • Column
    • Column中的主轴方向是垂直方向
    • mainAxisAlignment: MainAxisAlignment 主轴对齐方式
    • crossAxisAlignment: CrossAxisAlignment 交叉轴对齐方式
    • children: 内容
  • Row
    • Row中的主轴方向是水平方向(其他属性与Column一致)

八.弹性布局

  • Flex
    • direction (声明主轴方向)
    • mainAxisAlignment (声明主轴对齐方式)
    • textDirection (声明水平方向的排列顺序)
    • crossAxisAlignment (声明交叉轴对齐方式)
    • verticalDirection (声明垂直方向的排列顺序)
    • children (声明子组件)
  • Expanded (可伸缩组件)
    • flex (声明弹性布局的所占比例)
    • child (声明子组件)

九.流式布局

  • Wrap (解决内容溢出问题)
    • spacing (主轴方向子组件的间距)
    • alignment (主轴方向的对齐方式)
    • runSpacing (纵轴方向子组件的间距)
    • runAlignment (纵轴方向的对齐方式)

十.层叠布局

  • Stack (层叠组件 - 类似css中的z-index)

    • alignment (声明未定位子组件的对齐方式)
    • textDirection (声明未定位子组件的排列顺序)

  • Positioned (绝对定位组件)

    • child (声明子组件)
    • left、top、right、bottom
    • width、height

十一.Card

  • Card (卡片)

    • child (子组件)

    • color (背景色)

    • shadowColor (阴影色)

    • elevation (阴影高度)

    • shape (边框样式)

    • margin (外边距)

  • ListTile (列表瓦片)

    • leading (头部组件)
    • title (标题)
    • subtitle (子标题)

image-20231116101300836

Card(
          margin: EdgeInsets.all(30),
          color: Colors.purpleAccent[100],
          shadowColor: Colors.yellow,//阴影颜色
          elevation: 2,//阴影高度
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(40),
            side: BorderSide(
              color: Colors.yellow,
              width: 3
            )
          ),
          child: Column(
            children: [
              ListTile(
                leading: Icon(
                    Icons.supervised_user_circle,
                    size: 50,
                  ),
                  title: Text(
                    "张三",
                    style: TextStyle(
                      fontSize: 30
                    ),
                  ),
                  subtitle: Text(
                    "董事长",
                    style: TextStyle(
                      fontSize: 20
                    ),
                  ),
              ),
              Divider()
              ,
              ListTile(
                  title: Text(
                    "电话: 13333333333",
                    style: TextStyle(
                      fontSize: 20
                    ),
                  ),
                  
              ),
              ListTile(
                  title: Text(
                    "地址: XXXXXXXX",
                    style: TextStyle(
                      fontSize: 20
                    ),
                  ),
                  
              )
            ],
          ),
        ),

十二.Button

  • TextButton (文本按钮)
  • ElevatedButton (凸起按钮)
  • OutlinedButton (轮廓按钮)
  • IconButton (图标按钮)
  • ButtonBar (按钮组)
  • FloatingActionButton (浮动按钮)
  • BackButton (回退按钮)
  • CloseButton (关闭按钮)

其他按钮也有图标按钮的命名构造函数形式:

  • TextButton.icon()
  • ElevatedButton.icon()
  • OutlinedButton.icon()

声明按钮主题组件

  • TextButtonTheme
  • ElevatedButtonTheme
  • OutlinedButtonTheme

常用样式

1.按钮内写样式
TextButton(
	onPress:(){},
    child: Text("常用按钮样式"),
    //样式属性
    style: ButtonStyle(
        //设置按钮里的文字样式
    	textStyle: MatericalStateProperty.all(
        	TextStyle(
            	fontSize: 30
            )
        ),
        //设置前景色样式
        //MatericalStateProperty.resolveWith根据状态来动态设置样式
        //state的状态值,比如当前有没有点击按钮
        foregroundColor: MatericalStateProperty.resolveWith((state)=>{
            if(states.Contains(MaterialState.pressed)){
                //按下按钮时的前景色
                return Colors.red;
            }
            //默认状态的颜色
            return Colors.blue;
        }),
        backgroundColor: MatericalStateProperty.resolveWith((state)=>{
            if(states.Contains(MaterialState.pressed)){
                //按下按钮时的背景色
                return Colors.red;
            }
            //默认状态的颜色
            return Colors.blue;
        }),
        //设置阴影颜色
        shadowColor: MatericalStateProperty.all(Colors.yellow),
        //设置阴影的像素
        elevation: MatericalStateProperty.all(20),
        //设置边框
        side: MatericalStateProperty.all(
        	BorderSide(
            	color: Colors.green,
                width: 2
            )
        ),
        //声明按钮的形状
        shape: MatericalStateProperty.all(
            //设置圆角效果 ---StadiumBorder自动生成圆角
        	StadiumBorder(
            	side: BorderSide(
                	color: Colors.green,
                	width: 2
                )
            )
            //设置圆形效果
            /*CirCleBorder(
            	side: BorderSide(
                	color: Colors.green,
                	width: 2
                )
            )*/
        ),
        //设置按钮大小,Size(“宽度”,"高度")中
        minimumSize: MatericalStateProperty.all(Size(150,60)),
        //设置水波纹的颜色
        overlayColor: MatericalStateProperty.all(Colors.purple)
    )
)
2.通过主题写样式
OutlinedButtonTheme(
              data: OutlinedButtonThemeData(
                style: ButtonStyle(
                  overlayColor: MaterialStateProperty.all(Colors.blue)
                )
              ), 
              child: OutlinedButton(
                onPressed: (){
                  print("点击 OutlinedButton");
                },
                onLongPress: (){
                  print("长按 OutlinedButton ");
                },
                child: Text("OutlinedButton")
              ),
            
            ),

十三.图片

  • Image.asset (加载本地照片)
    • Flutter项目下，创建图片存储目录
    • 在pubspec.yaml中的flutter部分添加图片配置
    • 在代码中加载图片

image-20231116160905244

  • Image.network (加载网络照片)
    • 设置网络访问权限
    • 允许http协议访问

image-20231116155953535

Image.asset('images/1.jpg',
            width:100,
            height:100,
            //表示是会填充容器，容易失真
            fit: BoxFit.fill,
            //图片与背景颜色混合效果
           	colorBlendMode: BlendMode.colorDodge,
            //设置背景图片
          	color: Colors.green,
           )

十四.列表

1. SingleChildScrollView
  • SingleChildScrollView
    • child (子组件)
    • padding (内边距)
    • scrollDirection (滚动方向: Axis.horizontal | Axis.vertical)
    • reverse (初始滚动位置,false 头部、true 尾部)
    • physics
      • ClampingScrollPhysics: Android 下微光效果
      • BouncingScrollPhysics: IOS 下弹性效果
2.ListView

  • 加载所有列表组件

  • ListTile(leading,title,subtitle,trailing,selected)

    • leading (图标)

    • title (标题)

    • subtitle (子标题)

    • trailing (右边的图标)

    • selected (是否选中)

    • selectedColor (选中颜色)

    • selectedTileColor (ListTile的背景颜色)

3.ListView.builder

  • 按需加载组件，性能比默认构造函数高

  • 需要放在一个容器里

    • Container(
	height:200,
    child: ListView.builder(
    	itemCount:,//数组的长度
        itemExtent://每一项的高度
        itemBuilder: (context,index){
            return //返回集合中每个组件
        }
    )
)
4.ListView.separated

  • 多了分割线

  • Container(
	height:200,
    child: ListView.separated(
    	itemCount:,//数组的长度
        itemExtent://每一项的高度
        itemBuilder: (context,index){
            return //返回集合中每个组件
        },
        //分割器的构造器
        separatorBuilder: (context,index){
          return Divider(
            color: Colors.blue,
              //分割线的高度
            thickness: 2,
          );
        }
    )
)
5.GridVIew(网格布局)
  • children (子组件)
  • scrollDirection (滚动方向)
  • gridDelegate
    • SliverGridDelegateWithFixedCrossAxisCount (指定列数 - 子组件宽度自适应)
      • crossAxisCount (指定列数)
      • mainAxisSpacing (主轴间距)
      • crossAxisSpacing (交叉轴间距)
      • childAspectRatio (子组件的宽高比例)
    • SliverGridDelegateWithFixedCrossAxisExtent (指定子组件宽度 - 列数自适应)
      • maxCrossAxisExtent (子组件的宽度)
      • mainAxisSpacing (主轴间距)
      • crossAxisSpacing (交叉轴间距)
      • childAspectRatio (子组件的宽高比例)
6.GridView.count (列数固定)
7.GridView.extent (子组件宽度固定)
8.GridView.builder (动态网格布局)

需要指定数量

GridView,builder(
	itemCount:,//数量
    itemBuilder: (context,index){
        return _数组[index]
    }
)
常用属性
  • physics
    • ClampingScrollPhysics: Android 下微光效果
    • BouncingScrollPhysics: IOS 下弹性效果

image-20231116201246462

十五.第三方组件

  • 使用第三方组件需要在 pubsepc.yaml中添加 对应名称 依赖

  • 安装依赖(pub get | flutter packages get | vscode中保存配置，自动下载)

  • 在相关Dart文件引入

1.dio

dio是一个强大的Dart Http 请求库 (类似axios)

//示例代码
void getIpAddress() async {
    try {
      final url = "https://httpbin.org/ip";
      Response response = await Dio().get(url);
      String ip = response.data['origin'];
      print(ip);
    }catch(e){
      print(e);
    }
  }

2.Flutter-swiper

轮播组件

平面轮播图
Swiper(
	itemCount: imgs.length,
    itemBuilder: (context,index){
        return Image.asset(
        	imgs[index],
            fit: BoxFit.cover
        );
    },
    pagination: SwiperPagination(),//轮播图的指示点
    control: SwiperControl()//左右箭头导航
)
3D轮播图
Swiper(
	itemCount: imgs.length,
    itemBuilder: (context,index){
        return Image.asset(
        	imgs[index],
            fit: BoxFit.cover
        );
    },
    viewportFraction: 0.7,
    scale: 0.7
)

3.shared_perferences

shared_perferences是一个本地数据缓存库

使用需要获取示例

SharedPreferences prefs = await SharedPreference.getInstance();

  • 增
    • setString(key,value)
  • 删
    • remove(key) | clear()
  • 改
    • setString(key,value)
  • 查
    • getString(key)

image-20231117095832037

十六.状态管理

1.StatefulWidget

  • Flutter中的组件，按照状态划分

    • StatelessWidget (无状态组件)
    • StatefulWidget (状态组件)

  • 按照作用域划分

    • 组件内私有状态 (StatefulWidget)
    • 跨组件状态共享 (InheritedWidget、Provider)
    • 全局状态 (Redux | fish-redux 、 Mobx)

  • 状态组件的组成

    • StatefulWidget (组件本身不可变 - @immutable)

      class MyState extends StatefulWidget {
  const MyState({super.key});

  @override
  State<MyState> createState() => _MyStateState();
}

    • State (将变化的状态放到State中去维护)

      class _MyStateState extends State<MyState> {
//定义变量
  int _num = 0;

  void _increment(){
      //通过serState来写逻辑
    setState(() {
      _num++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(20),
            child: Text("数字 $_num"),
          ),
          ElevatedButton(
            onPressed: _increment,
             child: Icon(Icons.add))
        ],
      ),
    );
  }
}

2.DataTable

  • DataTable是Flutter中的表格
    • columns (声明表头列表)
      • DataColumn (表头单元格)
    • rows (表头单元格)
      • DataRow (一行数据)
        • DataCell(数据单元格)
    • 其他属性

image-20231117103845067

3.InheritedWidget

  • What: 提供了沿树向下，共享数据的功能

    • 即子组件可以获取父组件(InheritedWidget的子类)的数据

  • Why:

    • 依赖构造函数传递数据的方式不能满足业务需求
    • 所以，需要一个新的解决方案
    • image-20231117151454253

  • How:

    • BuildContext.dependOnInheritedWidgetOfExactType<MyInheritedWidget>()

4.生命周期

image-20231117162807545

5.Provider

  • 使用:

    • 安装Provider(第三方库)
    • 安装数据模型 (T extends ChangeNotifier)
    • 创建 Provider (注册数据模型)
      • Provider() //不会被要求随着变动而变动
      • ChangeNotifierProvider() //随着某些数据改变而被通知更新
    • 获取数据模型并更新ui
      • 通过上下文 (BuildContext)
      • 通过静态方法 ( Provider.of(Context) )

  • Provider是对InheritedWidget的封装

    • https://pub.dev.packages/provider

  • 优点:

    • 简化资源的分配与处置
    • 懒加载

  • 实现原理

    image-20231118113129519

    image-20231118113617013

十七.路由

1.路由简介

  • Route
    • 一个路由是一个屏幕或页面的抽象
  • Navigator
    • 管理路由的组件。Navigator 可以通过路由由入栈和出栈来实现页面跳转
    • 常用属性
      • InitialRoute: 初始路由,即默认页面
      • onGenerateRoute: 动态路由 (根据规则，匹配动态路由)
      • onUnknowRoute: 未知路由，也就是404
      • routes: 路由集合

2.匿名路由

  • Navigator

    • push (跳转到指定组件)

      Navigator.push(
	context,
    MaterialPageRoute(builder: (contexr) => 组件名称())
)

    • pop (回退)

      Navigator.pop(context)

3.命名路由

  • 声明路由
    • routes路由表 (Map类型)
    • initialRoute (初始路由)
    • onUnknownRoute (未知路由 - 404)
  • 跳转到命名路由
    • Navigator.pushNamed(context,‘路由名称’);

image-20231118182835228

4.动态路由

  • 动态路由是指,通过 onGenerateRoute属性指定的路由

image-20231118185435316

其他

  • Chip (标签)
  • CircleAvatar (圆形头像)
  • NetworkImage (网络图片组件)
    • 在安卓默认不会访问http协议的图片，可以在AndroidManifest.xml中

image-20231115105712442

  • Material

    • 安卓风格的组件
    • import ‘package:flutter/material.dart’

  • Cupertino

    • IOS风格的组件
    • import ‘package:flutter/cupertino.dart’

  • 如何判断环境?

    //引入核心库
import 'dart:io'
Widget dialogBox;
//判断当前平台的信息
if(Platform.isIos){
    //加载IOS风格组件
}else if (Platform.isAndroid){
    //加载Android风格的组件
}

  • SafeArea

    • SafeArea可以有效解决异形屏的问题(刘海屏)
想穿透次元壁的派大星
关注
  • 31
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter 基础（一）入门
danfengw的博客
03-25 805
介绍 flutter 应用是使用dart语言开发的，作为一个跨平台框架，flutter非常像React Native ，(1)比如flutter支持响应式编程和声明式编程。但是和React Native不同的是，flutter不需要JavaScript桥接，打打提升了整个应用的性能和应用启动时间，Dart是通过AOT技术取得了上述表现。 (2)另一方面，拥有JIT的Flutter 支持在开发期间，...
Flutter入门学习视频地址.txt
04-15
Flutter入门学习视频地址.txt
Flutter 入门
weixin_38890075的博客
05-06 201
Flutter 入门 序言:Android开发一枚,老板想快速开发,给了两周时间学习Flutter,然后接着进行开始 开发工具:Android Studio 语言:Dart(强类型,面向对象) AndroidStudio 的安装,请自行参考百度上巨多的教程(需要是Android3.0以及以上版本) 正式进入Flutter 环境的配置 AndroidStudio安装完毕以后,请先创建一个项目,确保...
【Flutter -- 基础】快速入门 Flutter_flutter开发零基础入门
2401_84520377的博客
05-01 726
Flutter app 使用了 Dart 语言，源自于 Google，现在是 ECMA 的标准。Dart 吸收了许多现代语言的特性，比如 Kotlin 和 Swift，同时能被转译成 js 代码。作为一个跨平台框架，Flutter 和 React Native 非常像，因为 Flutter 支持响应式和声明式语法。但和 React Native 不同，Flutter 不需要 Javascript 桥接，这显著提升了 app 的加载时间和整体性能。Dart 是通过 AOT 编译来做到这一点的。
flutter入门
薇语
01-09 557
flutter入门
flutter 入门
Mayness的博客
12-27 698
简介 安装 编写第一个应用 基本构建 Http请求 控件之间的通信和状态管理工具 打包
Flutter入门与进阶
06-16
本课程主要讲述Flutter入门的基础知识包括dart语言基础Flutter开发中的常用控件、App的生命周期，Flutter与Native之间的相互通信、封装自己plugin、http请求、数据持久化
flutter-guide::fire::fire::fire:学习flutter,各种flutter控件的基本使用和动画效果，简单易学。flutter 入门与进阶http
04-28
Flutter入门与进阶入门第二章 基础组件2.1： widget 简介2.2：状态管理2.3：文本和样式2.4：按钮2.5：图片和Icon2.6：单选和复选矿2.7：输入框2.8: 进度指示器2.9: 弹窗第三章 布局3.1 布局类组件简介3.2 线性布局...
Flutter教程从入门到进阶实战某网APP
10-06
53讲
Flutter酒店预订界面-JavaScript开发
05-26
如果这是您的第一个Flutter项目，则有一些资源可帮助您入门：实验：编写您的第一个Flutter应用程序食谱：有用的Flutter示例为了帮助Flutter入门，请查看我们的在线文档，其中提供了教程，示例，移动开发指南，以及...
Flutter（入门）
宋斌_nib的寂寞
10-08 211
Flutter（入门） 声明式布局 传统iOS and Android 是命令式 布局《由外向内》 多画界面，从中找感觉 性能 flutter 控制屏幕上的每个像素，避免了需要javaScript桥接导致的性能损失 RN是将布局转换为IiOS/Android 原生布局 环境配置 配置环境变量 bash_profile 捷径 open ~ open .bash_profile 创建 vim bash_profile 更新：source bash_profile 由于墙的原因需要配置镜像。具体查看us.
Flutter入门教程
ZFZ5720
09-02 7337
一、起源 Flutter在2018 世界移动大会发布第一个beta版本，这是谷歌发布的一套移动UI框架 ，可以快速在iOS和Android上构建高质量的原生用户界面。 能够做到一套代码两个终端运行。并且Flutter是完全免费、开源的。 Flutter组件采用现代响应式框架构建，这是从React中获得的灵感，中心思想是用组件(widget)构建你的UI。 组件描述了在给定其当前配置和状态时他们...
flutter入门教程
大灰狼的小绵羊哥哥的博客
05-15 9827
本文真对 Flutter 的技术特性，做了一些略全面的入门级的介绍，如果你听说过Flutter，想去了解它，但是又不想去翻厚厚的API，那么本文就是为你准备的。 随着纯客户端到Hybrid技术，到RN&Weex，再到如今的Flutter技术，客户端实现技术不断前进。 在之前的一个APP项目中，因为历史原因当时选择了weex，随着使用的不断深入，我们逐渐发现了weex的渲染性能问题已经成为一个隐患和瓶颈。 而Flutter技术的不断成熟和流行，Flutter的良好的跨平台性和高性能优点，不断吸引着我
Flutter基础入门
qq_33183882的博客
03-30 7546
flutter基础入门
【Flutter -- 基础】快速入门 Flutter
热门推荐
Kevin Learn Android
07-20 1万+
快速入门 Flutter 包括学习资料、书籍、视频等
flutter入门_Flutter入门安装指南
weixin_26727575的博客
08-24 102
flutter入门Flutter is a mobile SDK meant for designing high-performance and high-fidelity mobile apps for iOS and Android using a single codebase. Flutter是一个移动SDK，旨在使用单个代码库为iOS和Android设计高性能和高保真移动应用。 Te...
Flutter入门浅谈
菜鸟的向往
09-01 280
作为一个移动端码农，耳闻Flutter已经是几年前的事，Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。当初因为各种顾虑而没有下定决心去学习它。最近Flutter又出现在我的技术圈子中，想着几年过去应该比较成熟、稳定了，也逐渐被国内一些大厂所接纳，某鱼就是使用Flutter来实现的（某票最近也在使用某鱼，还发现了挺多bug，估计不是亲儿子）。于是忍不住去看了一下Flutter的开发文档，被文档中多次提及的富有表现力，漂亮的用户界面、现代的，响应式框架、快速开发
Flutter 入门代码
最新发布
05-08
Flutter 是 Google 开源的跨平台 UI 框架，可以用一套代码同时构建高性能、高保真的 iOS 和 Android 应用。Flutter 入门代码如下： ``` import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), ); } } ``` 以上代码实现了一个简单的计数器应用，点击按钮可以增加计数器的数值。在这段代码中，`MaterialApp` 定义了整个应用的主题和首页，`Scaffold` 定义了页面的基本结构和布局，`AppBar` 定义了页面的标题栏，`Center` 和 `Column` 定义了页面的居中和垂直布局，`Text` 显示文本内容，`FloatingActionButton` 定义了一个浮动按钮并响应点击事件。 如果你需要学习更多关于 Flutter 的知识，可以参考官方文档：https://flutter.dev/docs。同时，你还可以提出你感兴趣的问题，我将为你解答。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值