002简单MaterialApp主题和Scaffold脚手架

002最简单的MaterialApp主题和Scaffold脚手架使用导航栏_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1RZ421p7BL?spm_id_from=333.788.videopod.episodes&vd_source=68aea1c1d33b45ca3285a52d4ef7365f&p=1501.MaterialApp纯净的

 /*
 MaterialApp 是主题,自带方向设置,所以他里面的包含的widget都不需要设置方向
 home 参数里面放一个 widget,用来显示,第一个例子放了一个文本框Text,并且没有写方向参数
  */
 ​
 import 'package:flutter/material.dart';
 //为了使用MaterialApp
 main(){
     runApp(MaterialApp(
       home:Text("abc",style: TextStyle(fontSize: 200),
 ​
       ) ,
 //home这里可以放一个Widget,直接渲染到屏幕上,可以理解为画一个控件到屏幕上
 ​
     ));
 }

runApp 会把你传入的Widget小组件显示在屏幕上

1.flutter中所有的页面显示元素都是Widget的子类

abstract class Widget Widget翻译过来是叫小部件,是一个抽象类.所有显示的文本框，图标，图片，主题，导航栏，等等能显示的这些控件都继承自Widget

为了后面学习空间少写方向，需要先学习MaterialApp主题，这样可以不用给Widget写方向，否则都要设置方向 MaterialApp 是主题,自带方向设置,所以他里面的包含的widget都不需要设置方向

在pubspec.yaml文件的flutter部分中有一个uses-material-design: true，为了使用预定义的Material图标集，需要修改yaml文件，同时要注意其中的缩进问题

 //pubspec.yaml文件
 name: my_app
 flutter:
   uses-material-design: true

2.带widget嵌套的

第二个例子,为了演示 Widget的嵌套,这里演示 Center居中组件 里面 child参数 嵌套 文本框Text

//注意写函数返回类型,否则就变成dynamic 会报错

复习之前语法里面学习的const 嵌套问题，最外层用了const，那么里面就不用加，如果里面有单独的不是const的，那么最外层不能是const

 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 //第二个例子,为了演示 Widget的嵌套,这里演示 Center居中组件 里面 child参数 嵌套 文本框Text
 ​
 main(){
     runApp(
         MaterialApp(home:fun1()
    //runApp() 启动了一个 MaterialApp，并将runApp将fun1() 的返回值作为 home 参数传递给它
       )
     );
 }
 Widget fun1(){  //返回类型是 Widget
   return Center(
     child: Text("1233213ab",style: TextStyle(fontSize: 100),),
   );
 }//这段代码运行时，Text 的样式没有被 const 修饰符修饰，意味着每次构建 Text 时，都会创建一个新的 TextStyle 实例。
 ​
 -------------------------------------------------------
 ​
 // 复习之前语法里面学习的const 嵌套问题，最外层用了const，
 // 那么里面就不用加，如果里面有单独的不是const的，那么最外层不能是const
 main(){
   String str = "1233213ab";
   runApp(
        MaterialApp(home:Center(
         child: Text(str,style: const TextStyle(fontSize: 100),),
       )
       )
   );
 }
 //由于 TextStyle 使用了 const 修饰符，Flutter 在构建时不会每次创建新的 TextStyle 实例，优化了性能。
 ​

• Center 小部件:

  • Center 是 Flutter 中用于将子元素居中的小部件。它会将传递给它的 child 小部件在父容器中居中显示。

  • 在 fun1() 函数中，Center 小部件作为父容器，而 Text 小部件作为 Center 的 child，表示将文本 "1233213ab" 居中显示。

• Text 小部件

  • Text 用于显示文本。在这里，Text 显示的是字符串 "1233213ab"。

  • style: TextStyle(fontSize: 100) 设置了 Text 的样式，其中 TextStyle 用来指定字体的样式（在这里是设置字体大小为 100）。

  Center 是父小部件，Text 是子小部件。Center 的作用是将其子部件（在这里是 Text）居中显示。因此，Text 中的 "1233213ab" 将会显示在屏幕的中央，并且字体大小是 100。

3.Scaffold 脚手架使用导航栏

第3个例子为了MaterialApp主题里面带导航栏和背景 Scaffold参数appBar ,需要用AppBar()来创建,里面的leading(最左侧)和title(中间位置)可以用Widget,例如这里用的是一个文本框Text,和 一个图标Icon 注意使用 系统的图标要在 pubspec.yaml 文件里配置: uses-material-design: true

 /*
 Scaffold 脚手架,
 第3个例子为了MaterialApp主题里面带导航栏和背景
 参数appBar ,需要用AppBar()来创建,里面的leading(最左侧)和title(中间位置)可以用Widget,例如这里用的是一个文本框Text,和 一个 图标Icon
 注意使用 系统的图标要在 pubspec.yaml 文件里配置:  uses-material-design: true
  */
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 ​
 main(){
     runApp(MaterialApp(home: Scaffold(
     //启动了一个 MaterialApp，并将 Scaffold 作为主页传递给它
       appBar: AppBar(
           // leading: Text("左侧"),
         leading: Icon(Icons.menu),
           // 注意使用 系统的图标要在 pubspec.yaml 文件里配置:  uses-material-design: true
         title:  Icon(Icons.add),
         // Text("导航栏标题"),
 ​
       ),
       body:const Center(child: Text("内容123"))
     ),));
 }

• Scaffold:

  • Scaffold 是 Flutter 中的一个布局小部件，用于提供应用的基本结构（如导航栏、底部导航栏、内容区域等）。

  • Scaffold 通过参数来控制页面的不同部分，主要包括 appBar、body、floatingActionButton 等。

• appBar:

  • appBar 是 Scaffold 中的一个参数，用于创建页面顶部的导航栏。我们使用 AppBar 来设置导航栏的内容。

• AppBar的常见参数包括：

  • leading: 用于在导航栏左侧显示内容，通常用来显示一个图标或按钮。这里使用了 Icon(Icons.menu) 来显示一个菜单图标。

    • title: 用于设置导航栏的标题。在这里，title 使用了 Icon(Icons.add) 来显示一个加号图标。

• body:

  • body 参数指定页面的主要内容区域。在这里，body 是一个 Center 小部件，里面嵌套了一个 Text 小部件，用来显示 "内容123" 字符串。

  • Center 小部件将它的子小部件居中显示。