003 flutter初始文件讲解(2)

1.书接上回

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

Dart 复制代码
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,
  )
  );
}

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

Dart 复制代码
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.更多的修改与装饰

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

Dart 复制代码
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,就可以做到换行,当然,这里还有涉及到一个对齐的问题:

Dart 复制代码
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的烦恼!

相关推荐
Miki Makimura1 小时前
基于网络io的多线程TCP服务器
网络·c++·学习
丰锋ff1 小时前
2014 年真题配套词汇单词笔记(考研真相)
学习·考研
RaLi和夕1 小时前
嵌入式学习笔记4.STM32中断系统及外部中断EXTI
笔记·stm32·单片机·学习
2401_831501732 小时前
Python学习之day01学习(变量定义和数据类型使用)
开发语言·python·学习
straw_hat.2 小时前
PCB学习——STM32F103VET6-STM32主控部分
stm32·嵌入式硬件·学习
brave7233 小时前
Riverpod 3.0.0 版本中 Provider 类型选择指南
flutter
蒙奇D索大3 小时前
【数据结构】数据结构秘籍:如何衡量“查找”的快慢?ASL是关键!
数据结构·笔记·学习·考研
蒙奇D索大3 小时前
【数据结构】考研重点掌握:顺序查找算法实现与ASL计算详解
数据结构·笔记·学习·考研·算法·改行学it
能不能别报错4 小时前
K8s学习笔记(十一) service
笔记·学习·kubernetes
悠哉悠哉愿意4 小时前
【ROS2学习笔记】服务
开发语言·笔记·学习·ros2