详细介绍：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的烦恼！