当前位置: 首页 > article >正文

003 flutter初始文件讲解(2)

1.书接上回

首先,我们先来看看昨天最后的代码及展示效果:

import "package:flutter/material.dart";void main(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text("The World")), body:Center(child:Text("Hello World",textDirection:TextDirection.ltr, style:TextStyle(fontSize:40.0,color:Colors.purple,fontWeight:FontWeight.bold,),),), ),debugShowCheckedModeBanner: false,));
}

不知道大家是不是还是感觉怪怪的,原来是标题没有居中,那么接下来我们让标题在中间出现:

 

import "package:flutter/material.dart";void main(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text("The World"),centerTitle:true), body:Center(child:Text("Hello World",textDirection:TextDirection.ltr, style:TextStyle(fontSize:40.0,color:Colors.purple,fontWeight:FontWeight.bold,),),), ),debugShowCheckedModeBanner: false,));
}

我们在AppBar里面,加入了centerTitle,并将其设置为true,那么这个时候的标题就会自动居中啦

 2.更多的修改与装饰

接下来,我们会通过改变标题位置和主页面的颜色,从而将这两块区域区分开来,并同时修改标题的大小与颜色

import "package:flutter/material.dart";void main(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text("The World",textDirection:TextDirection.ltr,style:TextStyle(fontSize:40.0,  //改变大小color:const Color.fromARGB(255, 255, 4, 217),  //改变字体颜色fontWeight:FontWeight.normal,  //字体本身大小),),centerTitle:true,backgroundColor: const Color.fromARGB(255, 165, 237, 255), //标题处背景颜色), body:Center(child:Text("Hello World",textDirection:TextDirection.ltr, style:TextStyle(fontSize:40.0,color:const Color.fromARGB(255, 174, 31, 200),fontWeight:FontWeight.normal,),),),backgroundColor:const Color.fromARGB(255, 231, 253, 255), //主页面背景颜色设置),debugShowCheckedModeBanner: false,));
}

这里对主要的修改部分加以注释,值得注意的是,要修改诸如字体颜色,字体大小什么的,首先得先引用style,然后再设置,因为这些属于文本风格,接下来我们来看看效果:

相比之前,这个明显的比之前要好

最后关于多行的问题,则是在你输入的文本里面加入\n,就可以做到换行,当然,这里还有涉及到一个对齐的问题:

import "package:flutter/material.dart";void main(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text("The World",textDirection:TextDirection.ltr,style:TextStyle(fontSize:40.0,color:const Color.fromARGB(255, 255, 4, 217),fontWeight:FontWeight.normal,),),centerTitle:true,backgroundColor: const Color.fromARGB(255, 165, 237, 255),), body:Center(child:Text("Hello World!\nI love Flutter!",  //使用\n实现换行textAlign:TextAlign.center,  //居中对齐textDirection:TextDirection.ltr, style:TextStyle(fontSize:40.0,color:const Color.fromARGB(255, 174, 31, 200),fontWeight:FontWeight.normal,),),),backgroundColor:const Color.fromARGB(255, 231, 253, 255),),debugShowCheckedModeBanner: false,));
}

 通过在Text里面将textAlign设置为center,就实现了居中对齐,最后我们一起来看看效果~

 那么,在现在的基础上,后面就可以正式对原文件代码进行讲解啦

今天就先到这啦,祝大家天天开心!代码一遍就通!没有debug的烦恼!

http://www.lryc.cn/news/2395191.html

相关文章:

  • Windows系统下 NVM 安装 Node.js 及版本切换实战指南
  • 基于热力学熵增原理的EM-GAM
  • 2025.05.28-华为暑期实习第一题-100分
  • 鸿蒙OSUniApp滑动锁屏实战:打造流畅优雅的移动端解锁体验#三方框架 #Uniapp
  • 数据库中 用一个值实现类似linux中的读 写执行以及理解安卓杂用的按位或运算
  • 什么是数据驱动?以及我们应如何理解数据驱动?
  • opencv(C++) 图像滤波
  • 【线上故障排查】缓存热点Key导致Redis性能下降的排查与优化(面试题 + 3 步追问应对 + 案例分析)
  • cuda_fp8.h错误
  • Java设计模式从基础到实际运用
  • 网络安全基础--第九天
  • 鸿蒙如何引入crypto-js
  • 通过HIVE SQL获取每个用户的最大连续登录时常
  • 如何轻松将 iPhone 备份到外部硬盘
  • Matlab数据类型
  • 痉挛性斜颈带来的困扰
  • AI觉醒前兆,ChatGPT o3模型存在抗拒关闭行为
  • Flask项目进管理后台之后自动跳回登录页面,后台接口报错422,权限问题
  • HarmonyOS如何优化鸿蒙Uniapp的性能?
  • 使用逆强化学习对网络攻击者的行为偏好进行建模
  • 青少年编程与数学 02-020 C#程序设计基础 12课题、使用控件
  • 一文认识并学会c++模板初阶
  • 基于深度学习的工业OCR实践:仪器仪表数字识别技术详解
  • java导入excel
  • 回头看,FPGA+RK3576方案的功耗性能优势
  • csharp ef入门
  • 长短期记忆网络:从理论到创新应用的深度剖析
  • LiveNVR 直播流拉转:Onvif/RTSP/RTMP/FLV/HLS 支持海康宇视天地 SDK 接入-视频广场页面集成与视频播放说明
  • MySQL索引与性能优化入门:让查询提速的秘密武器【MySQL系列】
  • 进程间通信IV System V 系列(linux)