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