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 小部件將它的子小部件居中顯示。