仙居网站设计,视频网站建站费用,国际新闻最新消息今天乌克兰,云南seo公司文章目录 前言相关链接Widget 有状态和无状态Flutter 代码风格去掉烦人的括号后缀提示代码缩进 Flutter 布局最简单的布局widgets和Material widgets Dark语法习惯Flutter 布局默认布局Center居中Padding 填充Align对齐默认居中顶部底部右上角 通用 WidgetContainer处于性能原因… 文章目录 前言相关链接Widget 有状态和无状态Flutter 代码风格去掉烦人的括号后缀提示代码缩进 Flutter 布局最简单的布局widgets和Material widgets Dark语法习惯Flutter 布局默认布局Center居中Padding 填充Align对齐默认居中顶部底部右上角 通用 WidgetContainer处于性能原因最好不要使用Container一个简单的Container GridViewGridView.extentGridView.count 剩下的容器不再展开 总结 前言 再学习一个框架中布局容器的学习是最重要的。在Html中通过css来调整布局在WPF中用Grid/StackPanel/UniGrid/DockPanel等容器来嵌套布局。我其实更喜欢WPF这种方式因为我们一般也只采用一个布局方式多种布局方式不并存而且布局容器只管理布局这样更容易做业务的解耦 相关链接 Flutter 官网中文网址 给 Web 开发者的 Flutter 指南 Widget 有状态和无状态 其实我感觉这个说明不太接地气应该是静态Widget和动态Widget。静态Widget是不能直接修改的必须要用重新刷新更新。动态Widget是在内存里面专门划出一个空间数据驱动修改视图。一般来说能用静态就不用动态动态是有实际的数据变更需求才进行声明的。 而Flutter中一切皆Widget的概念类似于一切皆Box或者Div的概念。 Flutter 代码风格 去掉烦人的括号后缀提示 代码缩进 Flutter中的代码缩进竟然是靠【,】逗号来进行的我都惊呆了。 Flutter 布局 Flutter 中的布局 最简单的布局 我们将main.dart改为此布局 import package:flutter/material.dart;void main() {runApp(const MyApp()); }class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application.overrideWidget build(BuildContext context) {const String appTitle Flutter layout demo;return MaterialApp(title: appTitle,home: Scaffold(appBar: AppBar(title: const Text(appTitle),),body: const Center(child: Text(Hello World),),),);} } widgets和Material widgets Material是谷歌旗下的UI框架Material widgets是谷歌官方对widgets的封装。我们的示例代码用的就是Material widgets的布局。Flutter 项目默认使用。 Material App是flutter推荐的默认移动端应用布局包含多种功能。我们作为初学者还是以Widget原生学习为主。先学简单的UI布局。 Dark语法习惯 我非常讨厌官方这种无线套娃的嵌套地狱写法函数的入口就是return了。我一般都喜欢拼装式的写法就是先声明返回的内容然后再一点一点拼起来 Flutter 布局 FlutterCenter居中布局Padding填充布局Align对齐布局 Flutter有三大布局对齐居中填充。简单来说 对齐相对布局可控性最强 居中强制水平和垂直居中 填充居中动态长宽配合padding使用在控制长宽 默认布局 import package:flutter/material.dart; import package:flutter_widget_test/pages/ChartTestPage.dart; import package:fluttertoast/fluttertoast.dart; import utils/ToastUtils.dart;void main() {runApp(const MyApp()); }class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application.overrideWidget build(BuildContext context) {const String appTitle Flutter layout demo;const textStyle TextStyle(fontSize: 50);var res MaterialApp(title: appTitle,home: Scaffold(appBar: AppBar(title: const Text(appTitle),),body: const Text(hello flutter,style: textStyle,),));return res;} } 默认形状 Center居中 body: const Center(child: Text(hello flutter,style: textStyle,), ),Padding 填充 body: const Padding(padding: EdgeInsets.all(100),child: Text(hello flutter,style: textStyle,),),Align对齐 默认居中 body: const Align(child: Text(hello flutter,style: textStyle,), ),顶部 body: const Align(alignment: Alignment.topCenter,child: Text(hello flutter,style: textStyle,), ),底部 body: const Align(alignment: Alignment.bottomCenter,child: Text(hello flutter,style: textStyle,),),右上角 body: const Align(alignment: Alignment.topRight,child: Text(hello flutter,style: textStyle,),),通用 Widget 我们也要熟练掌握Android Studio的常用操作。 Container 如果说Widget是没有css的div的话Container就是有Css的div 处于性能原因最好不要使用Container avoid_unnecessary_containers 一个简单的Container body: Container(decoration: BoxDecoration(border: Border.all(width: 10, color: Colors.black38),),alignment: Alignment.center,child: const Text(hello flutter,style: textStyle,), ),GridView GridView.extent 通过限制单元格最大宽度来生成表格 class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application.overrideWidget build(BuildContext context) {const String appTitle Flutter layout demo;const textStyle TextStyle(fontSize: 25);//list构造器ListText _buildTextList(int count) List.generate(count,(index) Text(List${index},style: textStyle,));var body GridView.extent(maxCrossAxisExtent: 100,padding: const EdgeInsets.all(4),children: _buildTextList(30),);var res MaterialApp(title: appTitle,home: Scaffold(appBar: AppBar(title: const Text(appTitle),),body: body,));return res;} }GridView.count 通过设置每行列数来实现布局自动换行竖向过长可以自动滚动 class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application.overrideWidget build(BuildContext context) {const String appTitle Flutter layout demo;const textStyle TextStyle(fontSize: 25);//list构造器ListText _buildTextList(int count) List.generate(count,(index) Text(List${index},style: textStyle,),);return MaterialApp(title: appTitle,home: Scaffold(appBar: AppBar(title: const Text(appTitle),),body: GridView.count(crossAxisCount: 4,children: _buildTextList(30),),),);} } 剩下的容器不再展开 Flutter还有很多官方的容器这里就不作展开了大家可以去看一下。基本都有特殊场景的专门封装。 Flutter 容器构建 总结 Flutter还是挺好用的用下来的体验感觉还行。至少没啥Bug。问题就两个 一个是Dark语法的无限嵌套地狱有点过于蛋疼要及时解耦。因为他把Html的工作放在了Dark里面。和xaml的设计完全不一样xaml的设计是把简单的代码工作放在xaml里面复杂的逻辑在viewModel里面写。而前端是html声明静态元素css声明样式js去再去获取dom元素。感觉xaml的语法设计还是领先业界的可惜只有avalonia继承了下来。 另一个问题就是蛋疼的格式化风格缩进是两格没法改。展不展开代码看加不加逗号有点蛋疼。