Flutter

最新推荐文章于 2024-06-17 09:47:51 发布
最新推荐文章于 2024-06-17 09:47:51 发布
阅读量205 收藏 1
点赞数
分类专栏： 前端、原创 flutter 文章标签： flutter html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45776308/article/details/120454079
版权

第四节: Dart 中常用集合 List/Map - 简书 (jianshu.com)

调用抽象类中的方法（抽象方法和非抽象方法），如果方法是static的，直接 抽象类。方法 就可以了；如果是非static的则必须需要一个继承的非抽象类，然后用这个非抽象类的实例来调用方法。

1.课程大纲

 (14条消息) flutter- 空安全: Try adding either an explicit non-‘null‘ default value or the ‘required‘ modifier._ifredom-CSDN博客

=====================================================

前言：

快捷键的使用：

1、alt+ctrl+b:查找所有的实现类

2，alt+enter :生成container

3.ctrl+o：生成抽象方法

4.alt+enter：将statelessWidget转化为StatefulWidget

1.widget的生命周期

        

 2.基础的widget

  2.1：普通文本Text

      普通文本的展示:

     控制文本布局的参数：textAlign,排版方向等
     控制文本样式的参数：color，字体大小等

   

import 'package:flutter/material.dart';
// alt+enter :生成container
// ctrl +alt + b：查看所有的实现类
// 将statelessWidget转化为StatefulWidget：alt+enter
main() {
  runApp(MyAPP());
}
class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home:HYHomepage()
     
   );
  }
}

class HYHomepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("基础的widget"),
      ),
      body: HYHomeContent(),
    );
  }
}
// 普通文本的展示
// 控制文本布局的参数：textAlign,排版方向等
// 控制文本样式的参数：color，字体大小等
class HYHomeContent extends StatefulWidget {
  @override
  State<HYHomeContent> createState() => _HYHomeContentState();
}

class _HYHomeContentState extends State<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return const Text("莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马。谁怕！　一蓑烟雨任平生。归去，也无风雨也无晴。",
        textAlign: TextAlign.center,
//        显示最大行数
        maxLines: 3,
//        超过3行的字体....
        overflow: TextOverflow.ellipsis,
        style:TextStyle(
          fontSize: 20,
          color: Colors.red,
          fontWeight: FontWeight.bold
        ),
    );
  }
}

超级文本：（Text.rich）主要做图文混排

import 'package:flutter/material.dart';
// alt+enter :生成container
// ctrl +alt + b：查看所有的实现类
// 将statelessWidget转化为StatefulWidget：alt+enter
main() {
  runApp(MyAPP());
}
class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home:HYHomepage()
     
   );
  }
}

class HYHomepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("基础的widget"),
      ),
      body: HYHomeContent(),
    );
  }
}
// 普通文本的展示
// 控制文本布局的参数：textAlign,排版方向等
// 控制文本样式的参数：color，字体大小等
class HYHomeContent extends StatefulWidget {
  @override
  State<HYHomeContent> createState() => _HYHomeContentState();
}

class _HYHomeContentState extends State<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return  Text.rich(
        TextSpan(
//          text: "hello World1123",
//          style:TextStyle(fontSize: 20,color: Colors.red),
        children: [
          TextSpan(text:"kello world",style: TextStyle(color: Colors.red)),
          TextSpan(text:"kello flutter",style: TextStyle(color: Colors.orange)),
          WidgetSpan(child: Icon(Icons.favorite,color: Colors.redAccent,)),
        ]
    ));
  }
}

2.2按钮：

2.2.1:RaiseButton（凸起按钮）

import 'package:flutter/material.dart';
// alt+enter :生成container
// ctrl +alt + b：查看所有的实现类
// 将statelessWidget转化为StatefulWidget：alt+enter
main() {
  runApp(MyAPP());
}
class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home:HYHomepage()
     
   );
  }
}
// 按钮
class HYHomepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("基础的widget"),
      ),
      body: HYHomeContent(),
    );
  }
}
class HYHomeContent extends StatefulWidget {
  @override
  State<HYHomeContent> createState() => _HYHomeContentState();
}
// 按钮没有添加事件之前是没有交互效果的
class _HYHomeContentState extends State<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return  Column(
      children: [
       RaisedButton(
         child: Text("button"),
//         文本颜色
         textColor: Colors.deepPurple,
//         背景颜色
         color: Colors.amber,
         onPressed: (){
           print("nutton");
         },
       )
      ],
    )  ;
  }
}

 2.2.2：FlagButton(扁平按钮)    OutlineButton（）

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
// alt+enter :生成container
// ctrl +alt + b：查看所有的实现类
// 将statelessWidget转化为StatefulWidget：alt+enter
main() {
  runApp(MyAPP());
}
class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home:HYHomepage()
     
   );
  }
}
// 按钮
class HYHomepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("基础的widget"),
      ),
        body: HYHomeContent(),
    );
  }
}
class HYHomeContent extends StatefulWidget {
  @override
  State<HYHomeContent> createState() => _HYHomeContentState();
}
// 按钮没有添加事件之前是没有交互效果的
class _HYHomeContentState extends State<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return  Column(
      children: [
       RaisedButton(
         child: Text("button"),
//         文本颜色
         textColor: Colors.deepPurple,
//         背景颜色
         color: Colors.amber,
         onPressed: (){
           print("nutton");
         },
       ),
        FlatButton(
            onPressed: (){
             print("flatButton");
            },
            child:Text("flatbutton"),
           textColor: Colors.deepPurple,
//         背景颜色
           color: Colors.amber,
        ),
//       OutlineButton
            OutlinedButton(onPressed: (){
              print("Outline");
              },
             onLongPress:(){
              print("长按输出按钮ssss");
    },
              child: Text("你好"),
//              .all ：在边框之类的就是指4个边都统一设置
            style:ButtonStyle(backgroundColor:MaterialStateProperty.all(Colors.lightBlue),
                             textStyle:MaterialStateProperty.all( const TextStyle(fontSize: 10)),
                             foregroundColor:MaterialStateProperty.all(Colors.deepPurpleAccent),
//                             padding:MaterialStateProperty.all( const EdgeInsets.all(16)),
                              padding:MaterialStateProperty.all( const EdgeInsets.fromLTRB(2,2,3,4)),
                              shape: MaterialStateProperty.all(const CircleBorder(side:BorderSide(
                                color: Colors.blue,
                                width: 30,
                                style: BorderStyle.solid
                              ))),
//                              mouseCursor:MaterialStateProperty.all(SystemMouseCursors.click),
            )
            ),
      ],
    )  ;
  }
}

Image：NetworkImage

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
// alt+enter :生成container
// ctrl +alt + b：查看所有的实现类
// 将statelessWidget转化为StatefulWidget：alt+enter
main() {
  runApp(MyAPP());
}
class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home:HYHomepage()
     
   );
  }
}
// 按钮
class HYHomepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("基础的widget"),
      ),
        body: HYHomeContent(),
    );
  }
}
class HYHomeContent extends StatefulWidget {
  @override
  State<HYHomeContent> createState() => _HYHomeContentState();
}
// 图片
class _HYHomeContentState extends State<HYHomeContent> {
  final imgUrl="https://tse1-mm.cn.bing.net/th/id/R-C.09461790447848034fed493e84383d11?rik=h0BIpUujWfZ%2bDw&riu=http%3a%2f%2fpic.netbian.com%2fuploads%2fallimg%2f160713%2f215739-14684182593cfb.jpg&ehk=jBCJ%2fv%2fySg7UBOhadT8r3FL4IE9GIFjmLUau3zQhIRk%3d&risl=&pid=ImgRaw&r=0";
  @override
  Widget build(BuildContext context) {
    return  Image(
             color:Colors.red,
            //颜色混入到图片里面去
             colorBlendMode: BlendMode.colorDodge,
             image:
             NetworkImage(imgUrl),
             width: 200,
             height: 200,
             //宽度自适应
             fit:BoxFit.fitWidth,
             //定位
             alignment: Alignment(0,-1),
    );
  }
}

本地图片设置：

1.创建assets文件夹

2.在pubspec.yaml文件夹将assets代码注释释放出来

3.执行Packages get

 改进：引入的时候不用所有的资源引进，使用*来代替，不加*也可以

 

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
// alt+enter :生成container
// ctrl +alt + b：查看所有的实现类
// 将statelessWidget转化为StatefulWidget：alt+enter
main() {
  runApp(MyAPP());
}
class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home:HYHomepage()
     
   );
  }
}
// 按钮
class HYHomepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("基础的widget"),
      ),
        body: HYHomeContent(),
    );
  }
}
class HYHomeContent extends StatefulWidget {
  @override
  State<HYHomeContent> createState() => _HYHomeContentState();
}
// 图片
class _HYHomeContentState extends State<HYHomeContent> {
  final imgUrl="https://tse1-mm.cn.bing.net/th/id/R-C.09461790447848034fed493e84383d11?rik=h0BIpUujWfZ%2bDw&riu=http%3a%2f%2fpic.netbian.com%2fuploads%2fallimg%2f160713%2f215739-14684182593cfb.jpg&ehk=jBCJ%2fv%2fySg7UBOhadT8r3FL4IE9GIFjmLUau3zQhIRk%3d&risl=&pid=ImgRaw&r=0";
  @override
  Widget build(BuildContext context) {
    return  Image(
            image: AssetImage("assets/images/demo.jpg"),
    );
  }
}

weixin_45776308
关注
专栏目录
Flutter 项目：flutter的安装和环境配置
03-10
### Flutter项目：Flutter的安装与环境配置 #### 一、系统要求 为了成功地安装和运行Flutter，您的Windows环境必须符合以下系统要求。 ##### 硬件要求 **最低要求**： - **CPU**: x86_64架构 - **核心数**: 至少...
Flutter 鼠标样式、MouseRegion组件
m0_63159952的博客
03-10 2801
flutter 使用MouseRegion来更改鼠标光标样式，响应鼠标进入、鼠标离开、鼠标区域移动
flutter中的Text控件
wgefcelgu的专栏
08-02 471
在该构造函数中， `textSpan` 属性被设置为 `null`。- `textHeightBehavior` ：确定文本高度的行为。- `locale` ：用于选择文本字体或样式的区域设置。- `textScaleFactor` ：文本的缩放因子。- `selectionColor` ：文本选择的颜色。- `textAlign` ：文本在组件中的对齐方式。希望这能对您有所帮助！- `textDirection` ：文本的方向。- `style` ：应用于文本的样式。
Flutter 实现软鼠标
codeofcc的博客
06-17 604
flutter在嵌入式系统中运行时，有可能遇到drm鼠标无法使用的情况，但鼠标事件却可以正常接收，此时如果有软鼠标，就可以一定程度解决问题。本文提供了一个软鼠标的简单实现。以上就是今天要讲的内容，本文实现的软鼠标还是比较简单的，当然软鼠标对性能还是有一定的影响的，比如在linux中，每次移动都会触发交换缓存进行drm显示。
Flutter Web 鼠标样式修改
bawomingtian123的专栏
12-28 2113
在使用Flutter开发Web中为了更好的交互体检，往往会根据需求动态修改鼠标样式。 MouseRegion( cursor: judgeMouseCursor(), onEnter: (PointerEnterEvent event) { mouseDragDirection = -1; }, onExit: (PointerExitEvent event)
Flutter组件--TabBar使用详情(分段控制器)
eastWind1101的博客
11-21 9324
TabBar使用详情, TabController,分段控制器,左右滑动试图
Flutter 解决Type ‘MouseCursor‘ not found.
adojayfan的博客
09-19 698
出现场景 开发环境 adodeMacBook-Pro:~ ado$ flutter --version Flutter 2.0.3 • channel stable • https://github.com/flutter/flutter.git Framework • revision 4d7946a68d (6 months ago) • 2021-03-18 17:24:33 -0700 Engine • revision 3459eb2436 Tools • Dart 2.12.2 项目中需要展示
构建无障碍应用：Flutter中的无障碍特性详解
最新发布
06-28
Flutter是一个由Google开发的开源移动UI框架，它允许开发者使用单一的代码库来构建跨平台的移动应用程序，即可以同时为Android和iOS开发应用程序。Flutter使用Dart语言作为主要的开发语言，这是一门简洁、强类型、...
flutter 微信语音消息动画
07-19
在本文中，我们将深入探讨如何使用Flutter框架来实现微信风格的语音消息播放动画。Flutter是Google推出的一个开源UI工具包，用于构建高性能、高保真度的原生移动应用程序，适用于Android和iOS平台。微信语音消息动画...
flutter-windows-3.16.9-stable.zip
01-27
Flutter是Google开发的一款开源UI工具包，用于构建高性能、高保真、跨平台的移动、Web和桌面应用程序。本文将详细解析"flutter_windows_3.16.9-stable.zip"这一版本的Flutter SDK在Windows平台上的应用及其相关知识...
flutter plugin-android-lifecycle
09-25
Flutter的flutter_plugin_android_lifecycle插件是一个Flutter插件，用于访问Android Lifecycle objects。它可以帮助其他Flutter插件在Android上更好地集成。 要使用flutter_plugin_android_lifecycle插件，需要将...
java之Flutter环境搭建
06-16
首先我们下载Flutter开发工具包。 下载地址：docs.flutter.dev/development… 安装 将下载后的的压缩包，解压到你想安装的目录下（我这是：D:\flutter），最好不要放到权限比较高的目录，比如：C:\Program Files\ ...
flutter-local-auth
09-25
flutter_local_auth是一个Flutter插件，用于在移动设备上执行本地身份验证。它支持在iOS和Android设备上使用生物识别认证（例如指纹或面部识别），同时也支持在Android设备上使用指纹API进行身份验证。 要使用...
flutter插件
07-27
Flutter插件是Google开发的一款用于构建高性能、高保真、响应式移动应用的框架，主要应用于iOS和Android平台。在Android Studio中安装Flutter插件是为了更便捷地开发Flutter项目。然而，有时候即使安装了Flutter插件...
为Android / Fire TV构建的Flutter小部件-Flutter开发
05-28
为Android / Fire TV构建的Flutter小部件。 Flutter正式不支持android TV，并且不支持DPad控制器。 我开发了一个小部件，它支持DPad并响应所有控制器事件。 使用RawKeyboard小部件。 通过使用此功能，您可以将移动...
Flutter SDK
04-01
Flutter SDK是Google开发的一款开源UI工具包，专为开发者提供构建高性能、高视觉吸引力的原生移动应用程序。Flutter以其跨平台的能力，丰富的自定义组件库和热重载功能，深受开发者喜爱。它允许开发者使用单一代码库...
【Flutter 2-2】Flutter手把手教程UI控件——【多图预警】按钮RaisedButton、FlatButton、OutlineButton
弗拉德的技术博客
12-17 679
作者 | 弗拉德 来源 | 弗拉德（公众号：fulade_me) Material 风格中常用的按钮有三种RaiseButton、FlatButton、OutlineButton。 这三种按钮都是继承了MaterialButton，而MaterialButton又继承自StatelessWidget。 RaiseButton：带有阴影效果的按钮，默认带有灰色背景，点击下去会有点击效果和阴影。 FlatButton: 扁平风格按钮，点击下去会有背景颜色。 OutlineButton: 带有边框的按钮，且边框会
Flutter TextField设置内容并保持光标(cursor)在末尾
徐代龙的技术专栏
07-25 4469
正如上篇内容一样，实现textfiled内容填充，并保持光标在尾部。 代码很简单 TextField( controller: TextEditingController.fromValue(TextEditingValue( // 设置内容 text: inputText, ...
Flutter State生命周期详解
"Flutter State生命周期" 在Flutter框架中，State对象是 StatefulWidget 类的核心组成部分，它负责管理组件的状态并处理用户交互。State的生命周期是Flutter开发中非常重要的概念，因为它直接影响到应用的性能和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值