flutter笔记-万物皆是widget

文章目录

  • helloFlluter
  • 自定义Widget
    • 优化

这篇文章后就不见写了,学flutter主要是为了更好的使用 flutter-webrtc,所以到这里基本就了解了大部分的知识,后续边用边查;
在flutter中所有的view都叫widget,类似文本组件Text也是集成自widget;

helloFlluter

创建第一个项目如下:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main()=>runApp(Center(child:  Text("Hello world!!",textDirection: TextDirection.ltr,style: TextStyle(fontSize: 20,color: Colors.orange),),)
);

runApp传入的参数就是一个Widget;所以我们可以传入Text,示例中的Center类也是继承自Widget;

或者我们可以直接使用MaterialApp类去创建Material风格的应用;

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main() => runApp(MaterialApp(debugShowMaterialGrid: false,debugShowCheckedModeBanner: false,home: Scaffold(appBar: AppBar(title: Text("first app"),),body: Text("Hello world!!",textDirection: TextDirection.ltr,style: TextStyle(fontSize: 20, color: Colors.orange),),)));

如图:
在这里插入图片描述

自定义Widget

自定义一个需要以下两步骤:

  1. 定义类继承自自己要实现的widget
  2. 实现必须要实现的方法build方法;
    例如如下示例:
class LYMHomePage extends StatelessWidget{Widget build(BuildContext context) {// TODO: implement buildthrow UnimplementedError();}
}

其中的build是有flutter自动调用;

优化

在上面的示例main中的调用比较多,这显然不适合项目开发,所以初步优化如下:

void main() => runApp(LYMApp());class LYMApp extends StatelessWidget{Widget build(BuildContext context) {return MaterialApp(debugShowMaterialGrid: false,debugShowCheckedModeBanner: false,home: LYMScaffold());}
}class LYMScaffold extends StatelessWidget{Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("first app"),),body:LYMContainerBody(),);}
}
class LYMContainerBody extends StatelessWidget{Widget build(BuildContext context) {return  const Text("Hello world!!",textDirection: TextDirection.ltr,style: TextStyle(fontSize: 20, color: Colors.orange),);}
}

优化原则:因为MaterialApp是Material风格的框架是固定的,如果需要自定义其home也,那那种之前类似view,我们可以自定义view继承自widget实现;
其次Scaffoldhi一个脚手架,也就是相当于iOS中UIViewController;那么我们也可能将其中的body部分分离出来方便自定义实现;

需要注意的是所有的Widget类的状态都是不可改变的所以我们不能再代码里去修改按钮的状态,所以需要单独一个类去记录状态;所以优化如下:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main() => runApp(LYMApp());class LYMApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(debugShowMaterialGrid: false,debugShowCheckedModeBanner: false,home: LYMScaffold());}
}class LYMScaffold extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Center( // 添加 Center widgetchild: Text("first app"),),),body: LYMContentody(),);}
}
/*flag 状态     Stateful 不能定义状态*/
class LYMContentody extends StatefulWidget{@overrideState<StatefulWidget> createState() {return _LYMContentBodyState();}}
class _LYMContentBodyState extends State<LYMContentody> {bool flag = true;@overrideWidget build(BuildContext context) {return Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Checkbox(value: flag,onChanged: (newValue) {// 在改变状态前检查newValue是否为null,尽管当前上下文预期为非nullif (newValue != null) {setState(() {flag = newValue;});}},),const Text("同意协议"),],),);}
}

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯-网络安全-练习题-crypto-rsa

共模攻击 直接脚本即可 import libnum import gmpy2import random random.seed(123456)e1 random.randint(100000000, 999999999) print(e1) e2 65537 n 7265521127830448713067411832186939510560957540642195787738901620268897564963900603849624938868472135068795683…

618买什么最划算?618买什么东西便宜?必备数码好物清单分享

​只不&#xff0c;马上又到了618购物节咯&#xff0c;数码产品的优惠力度尤为显著&#xff0c;是购买数码产品的绝佳时机。接下来&#xff0c;我将为大家分享几款性价比超高的数码产品&#xff0c;相信总有一款能吸引你的目光。 一、南卡OE MIX开放式蓝牙耳机 在618购物狂欢节…

【vue2】实现微信截图(复制图片)在项目内可粘贴

需求 后台管理在上传图片地方需要将复制的图片粘贴上传 一、添加事件 在原有上传组件的基础上添加 paste事件 二、方法 onPaste(e) {const items (e.clipboardData || window.clipboardData).items;let blob null;for (let i 0; i < items.length; i) {if (items[i].ty…

【氧化镓】影响Ga2O3器件沟道载流子迁移率的关键因素

总结 这篇文章对β-Ga2O3 MOSFETs中的通道载流子迁移率进行了深入研究&#xff0c;通过实验测量和理论分析&#xff0c;揭示了影响迁移率的关键因素&#xff0c;特别是库仑散射的影响。研究结果对于理解和改进β-Ga2O3 MOSFETs的性能具有重要意义&#xff0c;为未来的研究和器…

混沌工程理论建设和项目实践

混沌工程理论建设和项目实践 1. 背景说明2. 为什么要做混沌工程2.1 混沌目标2.2 演习对象2.3 影响可用性的主要因素及应对2.4 可行性论证和控制爆炸半径 3. 如何落地3.1 安全、有效的实验3.2 安全&#xff1a;不影响线上业务3.2.1 爆炸半径3.2.2 特殊限制与审批 3.3 有效&#…

【FX110网】股市、汇市一年有多少个交易日?

事实上&#xff0c;作为交易者&#xff0c;重要的是要了解并非每天都是交易日。虽然金融市场在大多数工作日开放交易&#xff0c;但在某些特定情况下无法进行交易。这些非交易日可能因各种原因而发生&#xff0c;包括节假日、周末和市场休市。 通过随时了解假期、交易时间表和市…

【树莓派学习】开发环境配置

【树莓派学习】开发环境配置 ​ Raspberry Pi OS作为基于Linux的系统&#xff0c;其默认网络配置在国内的网络环境下容易出现访问慢甚至无法连接等问题&#xff0c;不便于我们的学习&#xff0c;同时&#xff0c;树莓派上C/C的使用需要单独安装WiringPi。本文主要介绍如何更改…

用代码给孩子造“钱”

起因 作为家里有两个娃的奶爸&#xff0c;时长为了孩子乱花钱而焦虑不已。然后最近看到一段短视频说了这么段话。 父母不要被动给孩子买东西&#xff0c;而是定期给孩子钱。让孩子自己管钱培养她对于钱的认知和理财的观念。 突然感觉大师我悟了。感觉值得一试。于是就打算给他…

C++ dll 分别 给c# c++使用

一、C# 自己写2D 3D算法库都要给别人用&#xff0c;所以好几年没有用过c# 了&#xff0c;调用一些 1、建立c 项目 .h 文件 #pragma once #ifdef __DLLEXPORT #define __DLL_EXP _declspec(dllexport) #else #define __DLL_EXP _declspec(dllimport) #endif extern "…

VSCode通过跳板机免密连接远程服务器的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

每周一算法:多起点最短路

题目描述 有一天&#xff0c;琪琪想乘坐公交车去拜访她的一位朋友。由于琪琪非常容易晕车&#xff0c;所以她想尽快到达朋友家。 现在给定你一张城市交通路线图&#xff0c;上面包含城市的公交站台以及公交线路的具体分布。 已知城市中共包含 n n n个车站&#xff08;编号 …

编写你的第一个java 程序

1.安装 jdk 网址&#xff1a; Java Downloads | Oracle 一般我们安装jdk 17 就行了 自己练习 自己学习 真正的开发中我们使用jdk 8 这个是最适合开发java 应用程序的 当然你也可以选择你的 系统 来安装这个java 在文件资源管理器打开JDK的安装目录的bin目录&#xff0c;会发…