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';//为了使用MaterialAppmain(){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_appflutter: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(){  //返回类型是 Widgetreturn Center(child: Text("1233213ab",style: TextStyle(fontSize: 100),),);}//这段代码运行时，Text 的样式没有被 const 修饰符修饰，意味着每次构建 Text 时，都会创建一个新的 TextStyle 实例。​-------------------------------------------------------​// 复习之前语法里面学习的const 嵌套问题，最外层用了const，// 那么里面就不用加，如果里面有单独的不是const的，那么最外层不能是constmain(){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: truetitle:  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 小部件将它的子小部件居中显示。