flutter学习之旅(二)

news/2024/11/13 3:39:35/

如果不知道怎么安装编写可以查看这篇

创建项目

另一个创建方法

flutter create 项目名

第二种创建方式flutter create 项目名

热部署

vscode 热部署

vscode很简单：可以通过Debug进行调试
在这里插入图片描述

使用flutter查看设备

flutter devices

全部的可使用设备
如图所见我现在用的是windows所以，我们检测不到ios因为

我们看看我的华为手机(HarmonyOS)
在这里插入图片描述

Flutter 真机调试

手机上选择‘传输文件’

识别到的手机

在这里插入图片描述

#连接上手机后直接在项目目录中使用
flutter run

在这里插入图片描述

注意: 时间会很久

[!] Gradle threw an error while downloading artifacts from the network.

出现错误的图片

我下载的版本是gradle-7.4-all.zip

把这个文件放在C:\用户\你的用户名\.gradle里(没有.gradle可以尝试以下几张图来打开)
此电脑->...->选项
点击'查看'->点击'显示隐藏文件、文件夹和驱动器'

之后我们进入项目根目录\android\gradle\wrapper\gradle-wrapper.properties
修改前图片

fluuter run

时间会很久
会生成一个项目根目录\build\app\outputs\flutter-apk\app-debug.apk文件
之后说是Installing build\app\outputs\flutter-apk\app.apk...需要在你Anroid手机上确认安装

成功运行图片
手机上运行成功图片

目录结构

  • andriod:安卓平台相关代码
  • ios: 苹果平台相关代码
  • linux: Linux平台相关代码
  • macos:MacOS平台相关代码
  • windows: Windows平台相关代码
  • lib: Flutter相关代码，主要编写程序的入口文件夹
  • test: 用于存放测试代码
  • pubspec.yaml: 保存了我们项目的所有依赖、版本号和配置信息(重要)
  • analysis_options.yaml: 分析dart语法的文件。老项目生成新项目有警告信息的话可以删除此文件

程序入口

在lib/main.dart(主文件)文件中使用flutter必须要引入flutter给我们提供的import 'package:flutter/material.dart';才行。之后就像我们C一样要有一个入口文件void main(){},在入口里面需要调用我们flutter里面提供的函数runApp()

import 'package:flutter/material.dart';void main(){runApp(flutter组件);
}

Center

它可以让我们的内容居中

import 'package:flutter/material.dart';void main() {
//可以是Center也可以是const Center()runApp(const Center());
}

const的好处就是多个相同的实例它可以共享存储空间,重新flutter build不会再次编译const的内容

参数

child: 孩子。可以在里面放入组件

import 'package:flutter/material.dart';void main() {runApp(const Center(child: Text("你好flutter",textDirection: TextDirection.ltr,style: TextStyle(color: Colors.blue, fontSize: 80),),));
}
  • textDirection: 文本方向。ltr:lefet to right(从左向右);rtl:从右向左

Text也是一个常量组件，为什么不加const?你可以理解child:常量组件等同于const array=[1,2,3]

  • style: 文本样式。查看底层是通过TextStyle来进行修饰的
    TextStyle属性
  • color:通过final Color? color。里面的参数可以是Colors.颜色或者Color.fromRGBO(r, g, b, opacity)来定义
  • fontSize:改变字体大小。传入的是一个double类型的数据

装饰我们的App

MaterialApp和Scaffold主要是用来装饰App

MaterialApp

MaterialApp是一个方便的Widget。它封装了应用程序实现Material Design所需要的一些Widget。一般作于顶层widget使用

常用属性

  • home(主页)
  • title(标题)
  • color(颜色)
  • theme(主题)
  • route(路由)

Scaffold

Scaffold是Material Design布局结构的基本实现。此类提供了drawer,snackbar和底部sheet的API

主要属性

  • appBar(显示在页面顶部的一个AppBar)
  • body(当前页面的主要内容Widget)
  • drawer(抽屉菜单控件)
import 'package:flutter/material.dart';void main() {runApp(new Scaffold(appBar: new AppBar(title: const Text("我的应用"),),body: new Center(child: const Text("Hello"),),));
}

现在执行的错误信息

我们需要创建自定义组件(其实全写在runApp中也挺乱的)

StatelessWidget: 是无状态的组件，状态不可改变的widget

StatefulWidget: 是有状态的组件, 持有的状态可能在widget生命周期改变

StatelessWidget

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {//实现build()的一个抽象方法//Use key in widget constructors: 自定义组件需要有一个keyconst MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const Center(child: Text("你好Flutter,我是一个自定义组件",textDirection: TextDirection.ltr,style: TextStyle(color: Color.fromRGBO(255, 255, 255, 1),fontSize: 40,),),);}
}

快捷方式
Awesome Flutter Snippets

statelessW

Container容器组件

与html中的<div></div>相似

alignment: 容器里面组件的位置

  • topCenter: 顶部居中对齐
  • topLeft: 顶部右对齐
  • center:水平垂直居中对其
  • centerLeft:垂直居中水平左对齐
  • centerRight: 垂直居中水平右对齐
  • bottomCenter: 底部居中对齐
  • bottomLeft: 底部居左对齐
  • bottomRight: 底部居右对齐

decoration: 装饰容器

decoration:BoxDecoration(color:Colors.blue,border:Border.all(color:Colors.red,width:2.0),borderRadius:BorderRadius.circular((8)),boxShadow:[BoxShadow(color:Colors.blue,offset:Offset(2.0,2.0),blurRadius:10.0,)]););//圆角

gradient:LinearGradlient(colors:[Colors.red,Colors.orange]);//LinearGradlient:背景线性渐变;RadialGradlient:径向渐变
  • margin:外边距&padding:内边距

与html-css是一样的

  • transform

让Container容易进行一些旋转之类的

transform:Matrix4.rotation(0.2)
  • height:容器高度
  • width:容器宽度
  • child: 容器子元素
  • Text组件
import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {//实现build()的一个抽象方法//Use key in widget constructors: 自定义组件需要有一个keyconst MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(//Container不是一个常量构造函数，所以要在外部取消constchild: Container(alignment: Alignment.center, //配置Container容器元素的访问width: 100,height: 100,decoration: BoxDecoration(//BoxDecoration是一个常量构造函数color: Colors.yellow,border: Border.all(//边线,对应css:bordercolor: Colors.red,width: 2,),borderRadius: BorderRadius.circular(100), //形状,css:border-radiusboxShadow: [BoxShadow(color: Colors.white, blurRadius: 10.0)],//LinearGradient:背景线性渐变; RadialGrandient径向渐变gradient:const LinearGradient(colors: [Colors.red, Colors.yellow]), //颜色渐变), //阴影,css:box-shadow));

Button样式编写

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("hello world"),),body: Column(children: const [MyButton()],)),));
}class MyButton extends StatelessWidget {const MyButton({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(width: 200,height: 40,margin: const EdgeInsets.all(10),// margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),padding: const EdgeInsets.all(20),decoration: const BoxDecoration(color: Colors.blue),// transform: Matrix4.translationValues(10, 0, 0), //css: transform。translationValues(位移)// transform: Matrix4.rotationZ(0.2), //旋转transform: Matrix4.skewY(0.3),);}
}

Text组件

名称功能
textAlign文本对齐方向(center居中,left左对齐,right右对齐)
textDirection文本方向(ltr从左到右;rtl从右到左)
overflow文字超出屏幕后的处理方式(clip裁剪,fade渐影,ellopsos省略号)
textScaleFactor字体显示倍率
maxLines文字显示最大行数
style字体样式设置

TextStyle样式

名称功能
decoration文字装饰器(noone没有线,lineThrough上划线,underline下划线)
decorationColor文字装饰线颜色
decorationStyle文字装饰线风格([dashed,dotted]虚线,double俩根线,solid一根实线,wavy波浪线)
wordSpacing单词间隙(如果时负值，会让单词变得更紧凑)
letterSpacing字母间隙(如果时负值，会让单词变得更紧凑)
fontStyle文字样式(italic斜体,normal正体)
fontSize文字大小
color文字颜色
fontWeight字体粗细(bold粗体,normal正常体)

http://www.ppmy.cn/news/77085.html

相关文章

深度分析：智能照明百亿赛道，Yeelight易来如何做到智能照明和定制照明双C位

深度分析：智能照明百亿赛道，Yeelight易来如何做到智能照明和定制照明双C位

日前&#xff0c;艾瑞咨询发布了《2023年中国家用智能照明行业研究报告》&#xff0c;报告显示&#xff0c;中国家用智能照明市场迎来爆发式增长&#xff0c;市场占有率从2016年仅2.0%上升到2022年的20.4%&#xff0c;7年间占比增长20%。预计2023年家用智能照明市场规模将突破1…
阅读更多...
9、Ray核心框架介绍

9、Ray核心框架介绍

9、Ray核心框架介绍 导航 1.简介和背景 2.Ray的基本概念和核心组件 3.分布式任务调度和依赖管理 4.对象存储和数据共享 5.Actor模型和并发编程 6.Ray的高级功能和扩展性 7.使用Ray构建分布式应用程序的案例研究 8.Ray社区和资源 9.核心框架介绍 10.扩展1
阅读更多...
分布式全局唯一id实现-2 springCloud-MyBatis-Plus集成百度分布式全局id（uid-generator）

分布式全局唯一id实现-2 springCloud-MyBatis-Plus集成百度分布式全局id（uid-generator）

前言&#xff1a;MyBatis-Plus 集成百度的uid-generator &#xff0c;实现业务实体在insert 实体时&#xff0c;可以自动获取全局id&#xff0c;完成数据保存&#xff1b; 1 uid-generator 全局id 生成的方式了解&#xff1a; Snowflake算法描述&#xff1a;指定机器 & 同…
阅读更多...
uvc驱动ioctl分析上

uvc驱动ioctl分析上

uvc驱动ioctl分析上 文章目录 uvc驱动ioctl分析上uvc_ioctl_querycap查询设备的能力uvc_ioctl_enum_fmt处理V4L2设备的枚举格式&#xff08;enum_fmt&#xff09;的ioctl操作uvc_ioctl_enum_fmt_vid_out枚举视频输出格式uvc_ioctl_enum_fmt_vid_cap枚举视频捕获格式 uvc_v4l2_g…
阅读更多...
测试提效1-电商一键创单的实现

测试提效1-电商一键创单的实现

因电商项目不同场景下单特别多&#xff0c;而走前端流程特别慢。所以在某些测试场景需要特定配送方式 和 特定配送状态数据&#xff0c;本次实现快速创建。 1、前端页面 前端页面采用vue &#xff0c;页面需要的属性或字段&#xff0c;打算包括 环境env、店铺(准备了3种不同模…
阅读更多...
【软考中级】软件设计师选择题题集（一）

【软考中级】软件设计师选择题题集（一）

海明校验码是在n个数据位之外增设k个校验位，从而形成一个k+n位的新的码字， 使新的码字的码距比较均匀地拉大。n与k的关系是（1)。 (1)A.2k - 1≥n + k  B.2n - 1≤ n + k   C.n = k  D.n-1≤k 【答案】A 【解析】 【答案】B A 【解析】 在采用结构化方法进行系统分析时，…
阅读更多...
【多路IO复用】select

【多路IO复用】select

select: 1.select&#xff1a;当被监听的 fd&#xff08;文件描述符&#xff09;就绪后会返回&#xff0c;但是我们无法知道具体是哪些 fd 就绪了&#xff0c;只能遍历所有的 fd。通常来说某一时刻&#xff0c;就绪的 fd 并不会很多&#xff0c;但是使用 select 必须要遍历所有…
阅读更多...
docker容器的时区更改

docker容器的时区更改

如果你希望Docker容器使用特定的时区&#xff0c;你有几种方法可以实现这个目标&#xff1a; 在运行Docker容器时设置环境变量&#xff1a;你可以在使用 docker run 命令启动容器时&#xff0c;通过 -e 参数设置一个环境变量 TZ。例如&#xff0c;如果你希望容器使用北京时间&a…
阅读更多...
最新文章

Copyright @ 2022~2023