Flutter使用build()构建用户界面

build 方法的结构

@protected
Widget build(
BuildContext context
)
@protected

build 方法的作用

用来构建当前 widget 小部件 的用户界面。

比如在小部件A中,插入 BuildContext 内容,当小部件 B 依赖小部件 A ,且小部件 B 发生更改时候,框架就会调用 build 方法。

build 方法可能会在每一帧中调用。

实例

import 'package:flutter/material.dart';

void main() {
  // 1:Basic widgets:基础组件
  // runApp(const MyApp());
  ///runApp()函数接受给定Widiget,并且使其成为小部件树的根

// 2:Using Material Components:Material组件构建
  runApp(const MaterialApp(
    title: 'My App',
    home: TutorialHome(),
  ));
}

// Using Material Components:Material组件构建
class TutorialHome extends StatelessWidget {
  const TutorialHome({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const IconButton(
          onPressed: null,
          icon: Icon(Icons.menu),
        ),
        title: const Text('菜单'),
        actions: const [
          IconButton(
            onPressed: null,
            icon: Icon(Icons.search),
          ),
        ],
      ),
      body: const Center(
        child: Text('我是中间页面内容'),
      ),
      floatingActionButton: const FloatingActionButton(
        onPressed: null,
        tooltip: 'Add',
        child: Icon(Icons.add),
      ),
    );
  }
}

posted @   西门长海  阅读(264)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示