flutter笔记-万物皆是widget

server/2024/9/22 19:08:19/

文章目录

  • 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.ppmy.cn/server/14573.html

相关文章

数据库之数据库恢复技术思维导图+大纲笔记

大纲笔记&#xff1a; 事务的基本概念 事务 定义 用户定义的一个数据库操作系列&#xff0c;这些操作要么全做&#xff0c;要么全不做&#xff0c;是一个不可分割的基本单位 语句 BEGIN TRANSACTION 开始 COMMIT 提交&#xff0c;提交事务的所有操作 ROLLBACK 回滚&#xff0c…

Llama 3大模型发布!快速体验推理及微调

Meta&#xff0c;一家全球知名的科技和社交媒体巨头&#xff0c;在其官方网站上正式宣布了一款开源的大型预训练语言模型——Llama-3。 据了解&#xff0c;Llama-3模型提供了两种不同参数规模的版本&#xff0c;分别是80亿参数和700亿参数。这两种版本分别针对基础的预训练任务…

RabbitMQ3.13.x之十二_WindowsServer服务器安装RabbitMQ后无法连接问题及处理方法

RabbitMQ3.13.x之十二_WindowsServer服务器安装RabbitMQ后无法连接问题及处理方法 文章目录 RabbitMQ3.13.x之十二_WindowsServer服务器安装RabbitMQ后无法连接问题及处理方法1. 基础环境2. 问题描述1. 问题描述2. 原因分析 3. 处理方法1. 修改两个.erlang.cookie 文件一致2. 卸…

1. Tailwind CSS 简介

1.1 什么是 Tailwind CSS Tailwind CSS 是一个高度可定制的、实用的 CSS 框架&#xff0c;它提供了一套丰富的工具类&#xff0c;使得开发者可以快速地构建现代化的用户界面。它的设计理念是“工具优先”&#xff0c;这意味着它提供的是一系列可以直接应用到 HTML 元素上的 CS…

力扣经典150题第四十一题:有效的字母异位词

目录 力扣经典150题第四十二题&#xff1a;有效的字母异位词引言题目详解解题思路代码实现示例演示复杂度分析 力扣经典150题第四十二题&#xff1a;有效的字母异位词 引言 本篇博客介绍了力扣经典150题中的第四十二题&#xff1a;有效的字母异位词。题目要求判断给定的字符串…

2024护眼台灯哪个牌子好?盘点目前比较好用的护眼台灯

在日常生活中&#xff0c;照明环境的好坏直接关系到我们的视力健康。为此&#xff0c;护眼台灯作为一种专为缓解眼部疲劳和保护视力而设计的照明设备&#xff0c;受到了广大用户的青睐。然而&#xff0c;面对市场上众多的护眼台灯品牌&#xff0c;消费者往往难以抉择。2024护眼…

MySql 查询优化

MySQL查询优化涉及多个方面&#xff0c;包括索引优化、查询优化、服务器配置优化等。以下是一些基本的查询优化技巧&#xff1a; 1.使用索引 确保你的查询利用了适当的索引。 SELECT * FROM table_name WHERE column_name value; 2.避免SELECT * 只选择需要的列&#xff…

企业为什么要选择通配符SSL证书使用?

企业选择使用通配符SSL证书主要是出于以下几个重要原因&#xff1a; 1. 经济性&#xff1a; - 节省成本&#xff1a;相较于为每一个子域名单独购买并维护单独的SSL证书&#xff0c;通配符证书能够以一张证书覆盖同一主域名下的所有同级子域名&#xff0c;无需为新增或已有的子域…