Flutter第八节-----Flutter布局与状态管理实战指南-北京尧图网络

一.状态更新-setstate●场景计数器点击进行数量1点击-进行数量-1U川视图需要进行相应更新。●语法数据的变化要更新Ul视图需要执行setState方法setState方法会造成ouild的重新执行。●案例实现一个计数器案例import package:flutter/material.dart; void main(ListString args) { runApp(pagewidget()); } class pagewidget extends StatefulWidget { pagewidget({Key? key}) : super(key: key); override _pagewidgetState createState() _pagewidgetState(); } class _pagewidgetState extends Statepagewidget { int count 0; override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Row( children: [ TextButton( onPressed: () { setState(() { count - 1; print(count); }); }, child: Text(减), ), Text(count.toString()), TextButton( onPressed: () { setState(() { count 1; print(count); }); }, child: Text(加), ), ], ), ), ), ); } }二.Flutter组件-布局组件●Flutter提供了丰富强大的布局组件来构建各种用户界面。下面这个表格汇总了最核心的几类布局组件1.基础容器---container●定义Container是功能丰富的布局组件是一个多功能组合容器●尺寸控制可通过多种方式定义大小有明确优先级规则。●优先级明确宽高constraints约束父组件约束自适应组件大小●装饰系统通过decoration属性实现视觉效果但和color属性互斥●布局控制提供内外边距和对齐方式●可选变化支持绘制时进行矩阵变换如旋转、倾斜、平移等import package:flutter/cupertino.dart; import package:flutter/material.dart; void main(ListString args) { runApp(pagewidget()); } class pagewidget extends StatelessWidget { const pagewidget({Key? key}) : super(key: key); override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container( transform: Matrix4.rotationZ(0.05), alignment: Alignment.center, margin: EdgeInsets.all(20), width: 200, height: 200, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(15), border: Border.all(width: 3, color: CupertinoColors.systemYellow), ), child: Text( Hello world!, style: TextStyle(color: Colors.white, fontSize: 20), ), ), ), ); } }三.Flutter组件---居中组件●Center:将其子组件在父容器的空间内进行水平和垂直方向上的居中排列import package:flutter/cupertino.dart; import package:flutter/material.dart; void main(ListString args) { runApp(pagewidget()); } class pagewidget extends StatelessWidget { const pagewidget({Key? key}) : super(key: key); override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text(center代码示例), centerTitle: true), body: Center( child: Container( width: 100, height: 100, decoration: BoxDecoration(color: Colors.blue), child: Center( child: Text(居中内容, style: TextStyle(color: Colors.white)), ), ), ), ), ); } }●应用场景页面内容整体居中如将一个登录表单或一个加载中的提示图标在页面正中显示●注意事项Center:不能设置宽高Centert的最终大小取决于其父组件传递给它的约束Center会向它的父组件申请尽可能大的空间●实现固定宽高且居中的组件Center去包裹一个具有固定宽高的子组件。Container/SizeBox

Flutter第八节-----Flutter布局与状态管理实战指南

相关推荐

AM62L MCASP与ADC寄存器配置：FIFO、DMA与中断实战解析

AI多Agent协作系统实战（十七）：凌晨4点，我的AI系统在“假装工作“——3个bug同时爆炸的5小时

Unity程序化网格生成：从零构建圆柱体Mesh的完整指南

更多资讯

Lexical Markdown 集成指南：@lexical/markdown 的导入导出、快捷键与 Transformers 深度解析

嵌入式开发板完整使用流程：从硬件准备到外设联调的七步闭环

SadTalker 安装教程：一张人像加一段音频，5 步生成说话视频

Actual 怎么在银行账户导入 CSV 文件时设置日期格式与收支分列

LunaTranslator 快速上手：按游戏类型选捕获方式的 Galgame 实时翻译完整指南

RP2040 DMA寄存器详解：Pico底层实时开发硬核指南

今日更新

SpacetimeDB C++ 模块库实战：用 C++20 在数据库内构建 WebAssembly 模块

别踩雷！不是所有 AI 写作工具都靠谱，2026 高校认可工具精选

SSM+MySQL幼儿园管理系统源码解析：从部署到优化

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？