1、Flutter使用总结(RichText、Container)

news2024/11/15 18:18:44

1、创建Flutter项目

 flutter create DemoName

2、运行项目

flutter run -d ‘iPhone 14 Pro Max’

注: 当运用Android Studio时、选择安卓模拟器运行项目、如果项目路径有中文名称: 那么运行报错、如果直接在项目路径下,采用终端运行安卓模拟器、可执行如下命令

flutter run -d ‘Android SDK built for x86’
No supported devices found with name or id matching 'Android SDK built for x86'.
The following devices were found:

此时会输出相应的设备名称及设备标识、比如选择当前USB连接的小米设备标识“46ffd0ad”执行

flutter run -d ‘46ffd0ad’

则会运行到当前手机上

3、当对当前项目做了修改时、在当前运行情况下输入 r、即可执行热重载刷新界面

4、当创建Flutter项目时,FlutterPlugin和Flutter Package的区别在于、

 FlutterPlugin插件适用于针对iOS原生或Android原生的Dart三方包、

 FlutterPackage适用于纯Dart语言应用的三方包、形如一个新的widget

 FlutterModule适用于混合开发

5、当项目运行卡死时、

  • 采用Command + Q强制结束项目、那么下一次使用Android Studio,会读取之前的缓存文件、如果缓存找回来了就会回到之前的工程、在找回来之前会影响新工程的开启、造成卡死现象.这个时候需要删除缓存文件
rm ~/opt/flutter/bin/cache/lockfile

6、MaterialApp初使用

  1. material.dart 相当于iOS中的UIKit
  2. runApp相当于UIApplication
  3. Center是一个位置控件
  4. child相当于子控件
  5. 在flutter中，如果内部只有一行代码、可以用箭头符号简写： void main() => runApp(MyWidget());
  6. 在Flutter中所有的Widget小部件分为两大类：有状态的Stateful和无状态的Stateless、无状态为不可变样式；有状态本质上也是无状态部件，但是它会将状态保留下来。
  7. 如何将一个部件显示到界面上？
    • 需要一个渲染方法:build方法,它会将小部件放到小部件渲染树中去，从第一个开始逐步渲染。在build方法中返回渲染样式。
  1. 在点击Text进入其中可以看到参数实现
    1. 其中的参数都为可选参数、也可以为其设置默认值。
    2. final表示不可变参数、var表示可变参数
  1. 重定义一个文字类型 final _textStyle = TextStyle();
  2. 代码块简写 stl 会创建一个 StatelessWidget代码块, stful会创建一个StatefulWidget代码块
  3. MaterialApp封装好一系列的便于开发的组件
  4. Scaffold具备导航条属性的界面,相当于NavigationController
import 'package:flutter/material.dart';//1.相当于iOS中的UIKit
// 以下都属于Dart语法、
// void main(){
//   //2.runApp相当于UIApplication
//   // runApp(
//   //   //3.Center是一个位置控件
//   //   Center(
//   //     //4.child相当于子控件
//   //     child: MyWidget(),
//   //   )
//   // );
//   //上边代码可以改为
//   runApp(MyWidget());
// }
//2、在flutter中，如果内部只有一行代码、可以简写为如下：
// void main() => runApp(MyWidget());
void main() => runApp(App());
// 也就是 => 代表了 {}
// Command + S保存后可以实现热更新
/*
5.在Flutter中所有的Widget小部件分为两大类：有状态的Stateful和无状态的Stateless、
无状态为不可变样式；有状态本质上也是无状态部件，但是它会将状态保留下来。
*/
//6.创建一个Widget，也就是一个类： MyWidget继承于 StatelessWidget无状态部件
class MyWidget extends StatelessWidget{
  /*
  7.如何将一个部件显示到界面上？
  需要一个渲染方法:build方法,它会将小部件放到小部件渲染树中去，从第一个开始逐步渲染。
  在build方法中返回渲染样式。
  */
  @override
  Widget build(BuildContext context) {
    //9.重定义一个文字类型
    final _textStyle = TextStyle(
      color: Colors.cyan,//文字颜色
      fontSize: 30,//文字大小
      fontWeight: FontWeight.bold,
    );
    return Center(
      child: Text('Hello My Flutter',
        textDirection: TextDirection.ltr,
        style: _textStyle,),
    );
  }
  Widget func() {
    return Text('Hello My Flutter', textDirection: TextDirection.ltr,);
  }
}
//8. 在点击Text进入其中可以看到参数实现
/*
  * 其中的参数都为可选参数、也可以为其设置默认值。
  * final表示不可变参数、var表示可变参数
* */
//10.代码块简写 stl 会创建一个 StatelessWidget代码块, stful会创建一个StatefulWidget代码块
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 10.1 MaterialApp封装好一系列的便于开发的组件
    return MaterialApp(
      //11. Scaffold具备导航条属性的界面,相当于NavigationController
      home: Scaffold(
        appBar: AppBar( // 导航条
          title: Text('Flutter Demo'),//导航条名称
          foregroundColor: Colors.red,
        ),
        body: MyWidget(), //导航条之外的body
      ),
      theme: ThemeData( //主题
        //Flutter 2.5之后废弃primaryColor,采用colorScheme
        // primaryColor: Colors.black,
        colorScheme: ColorScheme.light().copyWith(primary: Colors.black),
      ),
    );
  }
}

7、ListView使用及总结

  • ListView相当于TableView、需要填充的是 ListView.builder 协议内容
  • 其中的itemCount相当于numOfRows、在Flutter中没有Section概念
  • 其中的itemBuilder(BuildContext context,int index){} 相当于cellForRow方法
  • SizedBox()是一个边距占位方法
  • Image.network() 是加载网络图片的方法
  • Container中的child在设置时有三种类型:
    • Column 纵向布局、
    • Row横向布局、
    • Stack层级布局
import 'package:flutter/material.dart';//1.相当于iOS中的UIKit
import 'model/car.dart'; //导入头文件
//2、在flutter中，如果内部只有一行代码、可以简写为如下：
// void main() => runApp(MyWidget());
void main() => runApp(App());
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        colorScheme: ColorScheme.light().copyWith(primary: Colors.cyan),
      ),
    );
  }
}
  • 创建一个无状态的组件
// 12.创建一个无状态的Widget
class Home extends StatelessWidget {
  // _ 表示私有方法
  Widget _cellForRow(BuildContext context,int index){
    // Container相当于前端中的div
    return Container(
      color: Colors.white,//背景色
      // height: 20,// 给高度、默认填充全屏
      margin: EdgeInsets.all(10),
      // Image.network加载网络图片
      // child: Image.network(datas[index].imageUrl),
      child: Column( //Column 纵向布局、Row横向布局、Stack层级布局
        children: <Widget>[
          Image.network(datas[index].imageUrl),
          //文字和图片的空白距离
          SizedBox(height: 10,),
          Text(
            datas[index].name,
            style: TextStyle(
              fontWeight: FontWeight.w800,
              fontSize: 18.0,//字体大小
              fontStyle: FontStyle.values[1],//斜体
            ),
          ),
        ],
      ),
      // 边距设置为底部5
      // margin: EdgeInsets.only(bottom: 5),
    );
  }
  @override
  Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Colors.grey[100],
        appBar: AppBar(
          title: Text('FlutterDemo'),
        ),
        body: ListView.builder( // ListView相当于TableView、
          itemCount: datas.length, // numberOfItem， 在Flutter中没有Section概念
          //相当于 cellForRow
          itemBuilder: _cellForRow,
        ),
      );
  }
}

8、运行Flutter项目报错 dump failed because resource AndroidManifest.xml not found

  • 此时回到项目根目录下、终端执行
$flutter clean
  • 清楚缓存的build文件、然后再执行
$flutter create .
  • 重新生成编译文件

9、对上述的ListView使用进行再度封装、创建一个 listview_demo.dart文件

import 'package:flutter/material.dart';
import 'car.dart';
class ListViewDemo extends StatelessWidget {
  Widget _cellForRow(BuildContext context,int index){
    // Container相当于前端中的div
    return Container(
      color: Colors.white,//背景色
      // height: 20,// 给高度、默认填充全屏
      margin: EdgeInsets.all(10),
      // Image.network加载网络图片
      // child: Image.network(datas[index].imageUrl),
      child: Column( //Column 纵向布局、Row横向布局、Stack层级布局
        children: <Widget>[
          Image.network(datas[index].imageUrl),
          //文字和图片的空白距离
          SizedBox(height: 10,),
          Text(
            datas[index].name,
            style: TextStyle(
              fontWeight: FontWeight.w800,
              fontSize: 18.0,//字体大小
              fontStyle: FontStyle.values[1],//斜体
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder( // ListView相当于TableView、
        itemCount: datas.length, // numberOfItem， 在Flutter中没有Section概念
        //相当于 cellForRow
        itemBuilder: _cellForRow,
    );
  }
}
  • 此时main.dart文件的调用为
import 'package:flutter/material.dart';
import 'model/listview_demo.dart';
//widget
void main() => runApp(App());
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primaryColor: Colors.yellow,
      ),
    );
  }
}
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: AppBar(
        title: Text('FlutterDemo'),
      ),
      body: ListViewDemo(),
    );
  }
}

10、Text文本使用

  • 文本赋值可以通过字符串插值的方式: ${_title}
  • 可自定义TextStyle
  • Text最大行数: maxLines
  • 文字溢出样式:overflow
class TextDemo extends StatelessWidget {
  final TextStyle _textStyle = TextStyle(
    fontSize: 16.0, //文字大小
  );
  final String _title = 'iOS 性能优化';
  final String _teacher = 'Holothurian';
  @override
  Widget build(BuildContext context) {
    //1、文本赋值
    return Text(
      '《${_title}》---$_teacher 效率主要是指代码的执行效率、动画的流畅度、应用的冷启动时间和热启动时间、网络通信的阻塞时间等等;消耗主要是指内存的消耗、有没有内存泄漏、CPU的占用率、耗电与应用程序包大小等等;',
      textAlign: TextAlign.center,
      style: _textStyle,
      maxLines: 4,//文字行数
      overflow: TextOverflow.ellipsis,//文字溢出样式：省略号
    );
  }
}

11.富文本RichText

  • RichText表示富文本
  • TextStyle表示文本样式
  • TextSpan表示指定文本片段的风格及手势交互
class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 2.RichText 富文本
    return RichText(
        text: TextSpan(
          text: '《iOS 性能优化》',
          style: TextStyle(
              fontSize: 30,
              color: Colors.red
          ),
          children: <TextSpan>[
            TextSpan(
              text: 'Holothurian',
              style: TextStyle(
                  fontSize: 25,
                  color: Colors.cyan
              ),
            ),
            TextSpan(
              text: '效率主要是指代码的执行效率、动画的流畅度、应用的冷启动时间和热启动时间、网络通信的阻塞时间等等;消耗主要是指内存的消耗、有没有内存泄漏、CPU的占用率、耗电与应用程序包大小等等;',
              style: TextStyle(
                  fontSize: 20,
                  color: Colors.black
              ),
            )
          ],
        )
    );
  }
}
  • 效果图

12. Container使用补充

  • margin表示外边距
  • padding表示内边距
  • 当Container子控件没有child内容时、不会显示
class BaseWidgetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Row(//横向布局
        children: <Widget>[
          // 当Container子控件没有child内容时、不会显示
          Container(
            // 外边距
            margin: EdgeInsets.only(top: 20),
            // 内边距
            padding: EdgeInsets.only(left: 10,right: 10,top: 10,bottom: 10),
            color: Colors.red,
            child: Icon(Icons.add),
            // height: 40,
          ),
          Container(
            color: Colors.red,
            child: Icon(Icons.add_a_photo),
          ),
        ],
      ),
    );
  }
}
  • 效果图

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/494290.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

博客系统后端设计(二) - 封装数据库操作

博客系统后端设计(二) - 封装数据库操作

文章目录 封装数据库操作1. 创建一个 db.sql 文件2. 封装数据库的连接操作3. 创建实体类4. 封装数据库的增删改查操作4.1 创建 BlogDao 类中的方法4.2 创建 UserDao 类中的方法 封装数据库操作 这个步骤主要是把一些基本的数据库操作封装好&#xff0c;以后备用。 1. 创建一个…
阅读更多...
微信小程序——wxs脚本

微信小程序——wxs脚本

WXS目录 一、WXS的概述1、什么是wxs2、应用场景&#xff1a;3. wxs 与JavaScript(1)wxs 支持的数据类型:(2)wxs 不支持类似于 ES6 及以上的语法形式(3)wxs 遵循 CommonJS 规范 二 、WXS基础语法1、 内嵌 wxs 脚本2、外联的 wxs 脚本 三、WXS的特点1. 与 JavaScript 不同2. 不能…
阅读更多...
【计算机图形学基础教程】MFC基本绘图函数2

【计算机图形学基础教程】MFC基本绘图函数2

MFC基本绘图函数 绘图工具类 CGdiObject类&#xff1a;GDI绘图工具的基类CBitmap类&#xff1a;封装了GDI画刷&#xff0c;可以选作设备上下文的当前画刷&#xff0c;用于填充图形的内部CFont类&#xff1a;封装了GDI字体&#xff0c;可以选作设备上下文的当前字体CPalette类…
阅读更多...
一图看懂 aiohttp 模块：基于 asyncio 的异步HTTP网络库, 资料整理+笔记（大全）

一图看懂 aiohttp 模块：基于 asyncio 的异步HTTP网络库, 资料整理+笔记（大全）

本文由 大侠(AhcaoZhu)原创&#xff0c;转载请声明。 链接: https://blog.csdn.net/Ahcao2008 一图看懂 aiohttp 模块&#xff1a;基于 asyncio 的异步HTTP网络库, 资料整理笔记&#xff08;大全&#xff09; 摘要模块图类关系图模块全展开【aiohttp】统计常量模块1 aiohttp.hd…
阅读更多...
Redis超详细入门手册教程！还不快来看看？

Redis超详细入门手册教程！还不快来看看？

地址&#xff1a; RedisRedis is an open source (BSD licensed), in-memory data structure store, used as a database, cache, and message broker. Redis provides data structures …https://redis.io/ 1&#xff1a;NoSQL简介 1.1&#xff1a;数据库应用的演变历程 单…
阅读更多...
【Matlab】基于改进的 Hausdorf 距离的DBSCAN船舶航迹聚类

【Matlab】基于改进的 Hausdorf 距离的DBSCAN船舶航迹聚类

【Matlab】基于改进的 Hausdorff 距离的DBSCAN船舶航迹聚类 一、模型简介1.1问题背景1.2具体内容AIS数据的预处理船舶轨迹分割船舶轨迹相似度度量船舶轨迹表达方式船舶轨迹相似度量方法改进的 Hausdorff 距离船舶轨迹聚类及轨迹提取基于改进DBSCAN算法轨迹聚类船舶典型轨迹的提…
阅读更多...
PHP+vue基于web的小区物业管理管理系统1995a

PHP+vue基于web的小区物业管理管理系统1995a

小区物业管理系统主要是对小区物业以及居民信息进行管理&#xff0c;方便用户使用该资源的一种有效手段。能有效地对物业以及用户信息进行管理并为广大用户服务是该管理系统的基本要求&#xff0c;同时用户也可以及时了解最新的物业信息&#xff0c;方便地查询相关物业情况。基…
阅读更多...
Django配置WebSocket：django3配置websocket步骤

Django配置WebSocket：django3配置websocket步骤

一、websocket概述 简单可以认为是在web上实现socket功能&#xff0c;在服务器上与浏览器保持socket长连接。 实现websocket是通过magic string 二、环境概述 解释器&#xff1a;python3.9 django3.2 channels3.0.4 #有些时候是channels版本有问题&#xff0c;导致配置不…
阅读更多...
linux和window下svn版本控制可视化工具

linux和window下svn版本控制可视化工具

之前一直用命令行来拉取代码建立分支&#xff0c;推送代码等等 也不是不行&#xff0c;但是用久了&#xff0c;感觉很麻烦&#xff0c;后面就用了svn的版本可视化工具 linux和window下svn版本控制可视化工具 Linux环境下使用图形化界面的SVN客户端软件&#xff0c;那么RabbitVC…
阅读更多...
触控笔和电容笔哪个好用？ipad第三方电容笔了解下

触控笔和电容笔哪个好用？ipad第三方电容笔了解下

和最早出现的那一些触控笔相比&#xff0c;现在电容笔最大的不同之处在于&#xff0c;这些电容笔具备了防误触、倾斜可以随意调整笔迹粗细的特性。苹果的Pencil&#xff0c;现在的价格&#xff0c;也是非常高的。所以&#xff0c;对于预算不足的人群来说&#xff0c;平替电容笔…
阅读更多...
SDMTSP：斑马优化算法ZOA求解单仓库多旅行商问题（提供MATLAB代码，可更改起点及旅行商个数）

SDMTSP：斑马优化算法ZOA求解单仓库多旅行商问题（提供MATLAB代码，可更改起点及旅行商个数）

一、单仓库多旅行商问题 单仓库多旅行商问题&#xff08;Single-Depot Multiple Travelling Salesman Problem, SD-MTSP&#xff09;&#xff1a;&#x1d45a;个推销员从同一座中心城市出发&#xff0c;访问其中一定数量的城市并且每座城市只能被某一个推销员访问一次&#x…
阅读更多...
安装java配置

安装java配置

目录 安装JDK ​编辑 环境变量配置 3、检验环境变量配置 二、安装tomcat 验证Tomcat配置是否成功 三、安装Mysql 一、安装 二、卸载 安装JDK 点击更改将C直接给为F即可。 点击确定后进行安装&#xff0c;安装完以后会提示安装JRE; 检测是否已经安装JDK的方法 java命令通…
阅读更多...
尚硅谷-宋红康-JVM上中下篇完整笔记-JVM上篇_内存与垃圾回收篇

尚硅谷-宋红康-JVM上中下篇完整笔记-JVM上篇_内存与垃圾回收篇

前言 一.jvm及java体系结构 1. Java及JVM简介 TIOBE语言热度排行榜 https://www.tiobe.com/tiobe-index/ 世界上没有最好的编程语言&#xff0c;只有最适用于具体应用场景的编程语言。 java: 跨平台的语言JVM: 跨语言的平台 随着Java7的正式发布,Java虚拟机的设计者们通过JS…
阅读更多...
【周末闲谈】什么是云计算？

【周末闲谈】什么是云计算？

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️周末闲谈】 ✨第一周 二进制VS三进制 ✨第二周 文心一言&#xff0c;模仿还是超越&#xff1f; ✨第二周 畅想AR 文章目录 前言什么是云计算&#xff1f;&#x1f914;&#x1f914;&#x1f914;大数…
阅读更多...
【Linux】进程信号(中）

【Linux】进程信号(中）

在上一个文章中&#xff0c;关于信号的产生&#xff0c;还有没补充完的&#xff0c;所以在这篇文章补充一下 文章目录 1.信号的产生硬件异常产生信号a/0问题验证为8号信号 野指针问题验证为11号信号 核心转储设置核心转储大小Core与Term的区别核心转储的作用 2.信号保存1. 概念…
阅读更多...
Windows搭建C++开发环境（visual studio 2022）

Windows搭建C++开发环境（visual studio 2022）

开发环境的搭建 开发工具&#xff1a;vscode、visual studio 2022、visual studio 2019、2015、2010 .. 安装步骤&#xff08;以Windows下visual studio2022为例&#xff09;&#xff1a; 打开官网地址 Visual Studio 2022 IDE - 适用于软件开发人员的编程工具 (microsoft.com…
阅读更多...
Playwright-python 自动化测试【Anaconda】环境配置

Playwright-python 自动化测试【Anaconda】环境配置

第一步&#xff1a;Anaconda的安装 安装Anaconda的好处&#xff0c;比prenv网速快&#xff0c;并且拥有独立的python环境&#xff0c;再也不用烦恼用哪个python好了。 Anaconda的下载页参见官网下载&#xff0c;Linux、Mac、Windows均支持。 https://mirrors.tuna.tsinghua.ed…
阅读更多...
传奇人物《周兴和》书连载之68 创意改变了世界

传奇人物《周兴和》书连载之68 创意改变了世界

2008年11月3日。 上海。 这一天对周兴和来说&#xff0c;是一个非常值得记忆的日子。 这一天&#xff0c;联合国“南南全球技术产权交易所” 揭牌仪式在上海举行。这个交易所是由联合国开发计划署、中国商务部和上海市三方共同组建设立的。其主要任务是帮助发展中国家&#…
阅读更多...
.NET 发布和支持计划介绍

.NET 发布和支持计划介绍

对于 .NET 的发布&#xff0c;大多数童鞋都知道现在每年发布一个版本&#xff0c;针对 .NET 的发布&#xff0c;最近有些更新&#xff0c;Current 版本将改为 STS 版本&#xff0c;所以写一篇文章介绍一下 每年 11 月都会发布新的 .NET 主要版本&#xff0c;使开发人员、社区和…
阅读更多...
回归预测 | MATLAB实现MLR多元线性回归预测（多指标评价）

回归预测 | MATLAB实现MLR多元线性回归预测（多指标评价）

回归预测 | MATLAB实现MLR多元线性回归预测（多指标评价） 目录 回归预测 | MATLAB实现MLR多元线性回归预测（多指标评价）预测效果基本介绍模型描述程序设计参考资料预测效果 基本介绍 回归预测 | MATLAB实现MLR多元线性回归预测（多指标评价） 模型描述 多元线性回归（Multip…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023