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

    1、创建Flutter项目

     flutter create DemoName

    2、运行项目

    flutter run -d ‘iPhone 14 Pro Max’

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

    1. flutter run -d ‘Android SDK built for x86’
    2. No supported devices found with name or id matching 'Android SDK built for x86'.
    3. 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
    1. import 'package:flutter/material.dart';//1.相当于iOS中的UIKit
    2. // 以下都属于Dart语法、
    3. // void main(){
    4. //   //2.runApp相当于UIApplication
    5. //   // runApp(
    6. //   //   //3.Center是一个位置控件
    7. //   //   Center(
    8. //   //     //4.child相当于子控件
    9. //   //     child: MyWidget(),
    10. //   //   )
    11. //   // );
    12. //   //上边代码可以改为
    13. //   runApp(MyWidget());
    14. // }
    15. //2、在flutter中，如果内部只有一行代码、可以简写为如下：
    16. // void main() => runApp(MyWidget());
    17. void main() => runApp(App());
    18. // 也就是 => 代表了 {}
    19. // Command + S保存后可以实现热更新
    20. /*
    21. 5.在Flutter中所有的Widget小部件分为两大类：有状态的Stateful和无状态的Stateless、
    22. 无状态为不可变样式；有状态本质上也是无状态部件，但是它会将状态保留下来。
    23. */
    24. //6.创建一个Widget，也就是一个类： MyWidget继承于 StatelessWidget无状态部件
    25. class MyWidget extends StatelessWidget{
    26.   /*
    27.   7.如何将一个部件显示到界面上？
    28.   需要一个渲染方法:build方法,它会将小部件放到小部件渲染树中去，从第一个开始逐步渲染。
    29.   在build方法中返回渲染样式。
    30.   */
    31.   @override
    32.   Widget build(BuildContext context) {
    33.     //9.重定义一个文字类型
    34.     final _textStyle = TextStyle(
    35.       color: Colors.cyan,//文字颜色
    36.       fontSize: 30,//文字大小
    37.       fontWeight: FontWeight.bold,
    38.     );
    39.     return Center(
    40.       child: Text('Hello My Flutter',
    41.         textDirection: TextDirection.ltr,
    42.         style: _textStyle,),
    43.     );
    44.   }
    45.   Widget func() {
    46.     return Text('Hello My Flutter', textDirection: TextDirection.ltr,);
    47.   }
    48. }
    49. //8. 在点击Text进入其中可以看到参数实现
    50. /*
    51.   * 其中的参数都为可选参数、也可以为其设置默认值。
    52.   * final表示不可变参数、var表示可变参数
    53. * */
    54. //10.代码块简写 stl 会创建一个 StatelessWidget代码块, stful会创建一个StatefulWidget代码块
    55. class App extends StatelessWidget {
    56.   @override
    57.   Widget build(BuildContext context) {
    58.     // 10.1 MaterialApp封装好一系列的便于开发的组件
    59.     return MaterialApp(
    60.       //11. Scaffold具备导航条属性的界面,相当于NavigationController
    61.       home: Scaffold(
    62.         appBar: AppBar( // 导航条
    63.           title: Text('Flutter Demo'),//导航条名称
    64.           foregroundColor: Colors.red,
    65.         ),
    66.         body: MyWidget(), //导航条之外的body
    67.       ),
    68.       theme: ThemeData( //主题
    69.         //Flutter 2.5之后废弃primaryColor,采用colorScheme
    70.         // primaryColor: Colors.black,
    71.         colorScheme: ColorScheme.light().copyWith(primary: Colors.black),
    72.       ),
    73.     );
    74.   }
    75. }

    7、ListView使用及总结

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

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

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

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

    1. import 'package:flutter/material.dart';
    2. import 'car.dart';
    3. class ListViewDemo extends StatelessWidget {
    4.   Widget _cellForRow(BuildContext context,int index){
    5.     // Container相当于前端中的div
    6.     return Container(
    7.       color: Colors.white,//背景色
    8.       // height: 20,// 给高度、默认填充全屏
    9.       margin: EdgeInsets.all(10),
    10.       // Image.network加载网络图片
    11.       // child: Image.network(datas[index].imageUrl),
    12.       child: Column( //Column 纵向布局、Row横向布局、Stack层级布局
    13.         children: [
    14.           Image.network(datas[index].imageUrl),
    15.           //文字和图片的空白距离
    16.           SizedBox(height: 10,),
    17.           Text(
    18.             datas[index].name,
    19.             style: TextStyle(
    20.               fontWeight: FontWeight.w800,
    21.               fontSize: 18.0,//字体大小
    22.               fontStyle: FontStyle.values[1],//斜体
    23.             ),
    24.           ),
    25.         ],
    26.       ),
    27.     );
    28.   }
    29.  
    30.   @override
    31.   Widget build(BuildContext context) {
    32.     return ListView.builder( // ListView相当于TableView、
    33.         itemCount: datas.length, // numberOfItem， 在Flutter中没有Section概念
    34.         //相当于 cellForRow
    35.         itemBuilder: _cellForRow,
    36.     );
    37.   }
    38. }
    • 此时main.dart文件的调用为
    1. import 'package:flutter/material.dart';
    2. import 'model/listview_demo.dart';
    3. //widget
    4. void main() => runApp(App());
    5. class App extends StatelessWidget {
    6.   @override
    7.   Widget build(BuildContext context) {
    8.     return MaterialApp(
    9.       debugShowCheckedModeBanner: false,
    10.       home: Home(),
    11.       theme: ThemeData(
    12.         primaryColor: Colors.yellow,
    13.       ),
    14.     );
    15.   }
    16. }
    17. class Home extends StatelessWidget {
    18.   @override
    19.   Widget build(BuildContext context) {
    20.     return Scaffold(
    21.       backgroundColor: Colors.grey[100],
    22.       appBar: AppBar(
    23.         title: Text('FlutterDemo'),
    24.       ),
    25.       body: ListViewDemo(),
    26.     );
    27.   }
    28. }

    10、Text文本使用

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

    11.富文本RichText

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

    12. Container使用补充

    • margin表示外边距
    • padding表示内边距
    • 当Container子控件没有child内容时、不会显示
    1. class BaseWidgetDemo extends StatelessWidget {
    2.   @override
    3.   Widget build(BuildContext context) {
    4.     return Container(
    5.       color: Colors.yellow,
    6.       child: Row(//横向布局
    7.         children: [
    8.           // 当Container子控件没有child内容时、不会显示
    9.           Container(
    10.             // 外边距
    11.             margin: EdgeInsets.only(top: 20),
    12.             // 内边距
    13.             padding: EdgeInsets.only(left: 10,right: 10,top: 10,bottom: 10),
    14.             color: Colors.red,
    15.             child: Icon(Icons.add),
    16.             // height: 40,
    17.           ),
    18.           Container(
    19.             color: Colors.red,
    20.             child: Icon(Icons.add_a_photo),
    21.           ),
    22.         ],
    23.       ),
    24.     );
    25.   }
    26. }
    • 效果图

  • 相关阅读:
    Shell：一键部署pxe
    更强大的 MQTT over QUIC 桥接 & Azure 桥接
    IP地址基础知识
    Ant-design-vue组件上传文档
    JAVA Swing + Jdbc 实现宿舍管理系统
    全球变暖问题（floodfill 处理联通块问题）
    14-Linux之yum软件管理
    为何重要？解析企业实行网络安全等级保护的必要性
    2022牛客多校联赛第七场 题解
    编写高质量代码改善程序的157个建议：使用Dynamic来简化反射的实现
  • 原文地址：https://blog.csdn.net/SharkToping/article/details/130513942