Flutter学习第一天

2025-04-02 本文已影响0人冷武橘

一、Widget

在 Flutter 中，Widget 是构建用户界面（UI）的核心概念，可以理解为界面元素的抽象描述。它不仅仅是屏幕上可见的组件（如按钮、文字、图片），还包含了布局、样式、交互逻辑等所有与界面相关的信息。Widget 是 Flutter 框架中“声明式 UI”的核心体现，可以说F在lutter中万物皆Widget。

1.1、基础组件 Widget

用于显示基础内容或交互。

截屏2025-04-03 10.32.31.png

1.2、布局类 Widget

用于控制子组件的排列和位置。

截屏2025-04-03 10.34.42.png

1.3、交互与功能 Widget

用于处理用户输入或实现复杂功能。

截屏2025-04-03 10.35.40.png

1.4、Material Design 与 Cupertino 风格组件

提供平台一致性设计。

截屏2025-04-03 10.37.02.png

二、入口代码分析

2.1、runApp

void main() {
  //1、runApp函数
  runApp(
       Text("测试")
  );
}

void runApp(Widget app) {} 应用启动的核心函数, 是整个 Flutter 应用的第一个被执行的函数。以传入的 Widget 为根节点，递归构建整个 UI 树

以上是构建的一个简单组件，只用于理解，在实际开发中几乎所有 Flutter 应用都会以 MaterialApp 作为根组件,它封装了 Material Design 的设计规范、主题、导航、本地化等全局配置.

Material设计风格: MaterialApp 是Google公司推行的一套设计风格，或者叫设计语言、设计规范等;里面有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等；

2.2、MaterialApp

MaterialApp(
navigatorKey: GlobalKey(), // 导航系统控制中枢
scaffoldMessengerKey: GlobalKey(), // SnackBar 全局管理
theme: ThemeData(...), // 视觉样式数据中心
home: HomePage(), // 应用入口页面
routes: {...}, // 静态路由表
onGenerateRoute: (settings) {}, // 动态路由生成
locale: Locale('zh', 'CN'), // 本地化配置
supportedLocales: [Locale('en')], // 多语言支持
builder: (context, child) {}, // 全局组件包裹
)

void main() {
  //1、runApp函数
  runApp(
     MaterialApp(
      home: Text("测试"),
     )
  );
}

home:是 MaterialApp 的一个关键属性用于指定应用启动时显示的第一个页面，类似于 iOS 中根控制器（Root View Controller）的视图（View)

2.3、自定义Widget

void main() {
  runApp(
     MaterialApp(
        home: HomePage(),
     )
  );
}

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return Text("测芬芬试");
  }

}

创建的Widget继承自StatelessWidget或者StatefulWidget
重写 Widget build(BuildContext context)方法，Flutter在拿到我们自己创建的StatelessWidget时，就会执行它的build方法；我们需要在build方法中告诉Flutter，我们的Widget希望渲染什么元素，比如一个Text Widget；StatelessWidget没办法主动去执行build方法，当我们使用的数据发生改变时，build方法会被重新执行；

2.4、StatelessWidget和StatefulWidget

1、StatelessWidget：没有状态改变的Widget，通常这种Widget仅仅是做一些展示工作而已；

class StaticButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => print('按钮点击'),
      child: const Text('点我'),
    );
  }
}

如上常使用于静态内容（如文本、图标、固定布局）

2、StatefulWidget: 需要保存状态，并且可能出现状态改变的Widget；

class MyStatefullWidget extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return MyStatefullState();
  }
}

class MyStatefullState extends State<StatefulWidget>{
   final name = "";
  @override
  Widget build(BuildContext context) {
   return Text("测芬888芬试");
  }
}

动态内容（如计数器、表单输入、动画）

创建自己的StatefulWidget需要重写createState() 创建对应的 State 对象
StatefulWidget 本身不直接构建 UI，但它的关联 State 类负责构建 UI。二者共同构成一个完整的动态组件。

2.5、Scaffold

Scaffold 是 Flutter 中构建 Material Design 风格页面的核心骨架组件。它通过预定义的参数（如 appBar 和 bottomNavigationBar）快速搭建标准化的页面结构。

顶部导航栏（appBar）
主体内容区域（body）
底部导航栏（bottomNavigationBar）
悬浮操作按钮（floatingActionButton）
抽屉菜单（drawer 和 endDrawer）
底部表单（bottomSheet）

void main() {
  runApp(
     MaterialApp(
        home: Scaffold(
        appBar:AppBar(title: Text("首页"),),
         bottomNavigationBar: BottomNavigationBar(
                items: const [
           BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
     ),
     BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
    ),
  ],
)
,
 body: MyStatefulWidget(),
   )
        
        ,
     )
  );
}
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key}); // 补全构造函数

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int count = 0; // 明确类型声明

  void increment() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: increment, // 正确传递函数引用（移除括号）
      child: Text("$count"),
    );
  }
}