Flutter 开发学习笔记(4):widget布局容器学习

文章目录

  • 前言
  • 相关链接
  • Widget 有状态和无状态
  • Flutter 代码风格
    • 去掉烦人的括号后缀提示
    • 代码缩进
  • Flutter 布局
    • 最简单的布局
    • widgets和Material widgets
  • Dark语法习惯
  • Flutter 布局
    • 默认布局
    • Center居中
    • Padding 填充
    • Align对齐
      • 默认居中
      • 顶部
      • 底部
      • 右上角
  • 通用 Widget
    • Container
      • 处于性能原因，最好不要使用Container
      • 一个简单的Container
    • GridView
      • GridView.extent
      • GridView.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.
  @override
  Widget 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 布局

Flutter：Center（居中布局），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.
  @override
  Widget 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.
  @override
  Widget build(BuildContext context) {
    const String appTitle = 'Flutter layout demo';
    const textStyle = TextStyle(fontSize: 25);
    //list构造器
    List<Text> _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.
  @override
  Widget build(BuildContext context) {
    const String appTitle = 'Flutter layout demo';
    const textStyle = TextStyle(fontSize: 25);
    //list构造器
    List<Text> _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继承了下来。

另一个问题就是蛋疼的格式化风格，缩进是两格，没法改。展不展开代码看加不加逗号，有点蛋疼。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/511997.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

波奇学Linux：tcp滑动窗口

波奇学Linux：tcp滑动窗口

连接建立成功和上层有没有accept没有关系 listen的第一个参数为1&#xff0c;建立的连接数量为2 操作系统底层用队列来管理建立的连接&#xff0c;上层用accept来获取链接 blacklog1 表示底层已经建立好的连接队列的最大长度 超过最大长度的连接&#xff0c;服务端不会丢弃…
阅读更多...
STM32CubeMX配置步骤详解零 —— 引言

STM32CubeMX配置步骤详解零 —— 引言

引子 初识 笔者接触STM32系列MCU有些年头了。初次接触是2015年&#xff0c;那时是在第二空间&#xff08;北京&#xff09;科技有限公司上班&#xff0c;是以STM32F407&#xff08;后缀好像是RGT6或ZGT6&#xff0c;记得不是很清楚了&#xff09;为主芯片做VR头戴式设备&…
阅读更多...
SpringBoot整合Activiti7——实战之出差流程(分支)

SpringBoot整合Activiti7——实战之出差流程(分支)

文章目录 代码实现部署流程启动流程查询任务填写出差审批单经理审批xml文件 出差流程&#xff1a;开始 - 填写出差表单 - 判断&#xff08;出差天数大于等于5&#xff09;- 副经理审批 - 否则总经理审批 - 完成 代码实现 部署流程 Testpublic void testDeployProcess() throws …
阅读更多...
物联网实战--入门篇之(九)安卓QT--开发框架

物联网实战--入门篇之(九)安卓QT--开发框架

目录 一、QT简介 二、开发环境 三、编码风格 四、设计框架 五、总结 一、QT简介 QT是一款以C为基础的开发工具&#xff0c;已经包含了很多常用的库&#xff0c;除了基本的GUI以外&#xff0c;还有网络、数据库、多媒体、进程通信、串口、蓝牙等常用库&#xff0c;开发起来…
阅读更多...
mysql 正则表达式查询

mysql 正则表达式查询

学习了mysql 连接查询和子查询和myql join连接&#xff0c;接下来学习下正则表达式查询。正则表达式的规则都是相似的。 8&#xff0c;使用正则表达式查询 正则表达式通常被用来检索或替换那些符合某个模式的文本内容,根据指定的匹配模式匹配文本中符合要求的特殊字符串。例如从…
阅读更多...
绿色wordpress外贸建站模板

绿色wordpress外贸建站模板

绿色wordpress外贸建站模板 https://www.mymoban.com/wordpress/6.html
阅读更多...
PAC下的ROP问题

PAC下的ROP问题

Armv8.3-A引入了pointer authentication选项。 pointer authentication可以减轻ROP攻击。 为了防止ROP攻击&#xff0c;在函数开始时&#xff0c;LR寄存器中的返回地址被签名。这意味着在寄存器的高位添加了一个PAC。在返回之前&#xff0c;使用PAC对返回地址进行验证。如果检查…
阅读更多...
Linux 环境下 Redis基础配置及开机自启

Linux 环境下 Redis基础配置及开机自启

Linux 环境下 Redis基础配置及开机自启 linux环境安装redis<redis-6.0.5.tar.gz> 1-redis基本安装配置 解压 获取到tar包后&#xff0c;解压到相关目录&#xff0c;一般是将redis目录放在usr/local/redis目录下&#xff0c;可以使用-C指定到解压下目录 tar -zvxf re…
阅读更多...
HCIA-RS基础-以太网设备工作原理

HCIA-RS基础-以太网设备工作原理

目录 以太网设备工作原理1. HUB 的工作原理2. L2 交换机的工作原理3. L3 交换机的工作原理 总结 以太网设备工作原理 以太网是一种常用的局域网技术&#xff0c;用于在计算机网络中传输数据。在以太网中&#xff0c;有几种常见的设备&#xff0c;包括 HUB、L2 交换机和 L3 交换…
阅读更多...
PyQt qrc2py 使用PowerShell将qrc文件转为py文件并且将导入模块PyQt或PySide转换为qtpy模块开箱即用

PyQt qrc2py 使用PowerShell将qrc文件转为py文件并且将导入模块PyQt或PySide转换为qtpy模块开箱即用

前言 由于需要使用不同的qt环境&#xff08;PySide&#xff0c;PyQt&#xff09;所以写了这个脚本&#xff0c;使用找到的随便一个rcc命令去转换qrc文件&#xff0c;然后将导入模块换成qtpy这个通用库(支持pyside2-6&#xff0c;pyqt5-6)&#xff0c;老版本的是Qt.py(支持pysi…
阅读更多...
BIM转Power BI数据集

BIM转Power BI数据集

在本博客中&#xff0c;我们将了解如何使用从 SSAS 表格、Power BI Desktop 或 Power BI 服务数据集中提取的 Model.bim 文件在本地或 PBI 服务上生成新数据集。 1、设置&#xff08;SSAS 表格和 PBI 服务通用&#xff09; 我建议你创建一个专门用于此任务的新 Python 环境&a…
阅读更多...
hibernate session接口

hibernate session接口

hibernate session接口 Session接口是hibernate向应用程序提供的操纵数据库的最主要的接口&#xff0c;提供了保存、更新、删除和加载Java对象的方法。 session具有一个缓存&#xff0c;位于缓存中的对象成为持久化对象&#xff0c;和数据库中的相关记录对应。session能够在某些…
阅读更多...
vue3中怎么点击按钮就上传文件

vue3中怎么点击按钮就上传文件

<el-button text type"primary" click"importBillExcel(row)">导入账单</el-button> // 导入客户账单Excel表 const importBillExcel (row) > {let input document.createElement(input)input.type fileinput.accept .pdf, .png, .zip…
阅读更多...
摸鱼123

摸鱼123

摸鱼https://toyaml.com/windowsupdate.html
阅读更多...
3D模型格式转换工具HOOPS Exchange如何将3D文件加载到PRC数据结构中？

3D模型格式转换工具HOOPS Exchange如何将3D文件加载到PRC数据结构中？

HOOPS Exchange是一款高效的数据访问工具&#xff0c;专为开发人员设计&#xff0c;用于在不同的CAD&#xff08;计算机辅助设计&#xff09;系统之间进行高保真的数据转换和交换。由Tech Soft 3D公司开发&#xff0c;它支持广泛的CAD文件格式&#xff0c;包括但不限于AutoCAD的…
阅读更多...
js手持小风扇

js手持小风扇

文章目录 1. 演示效果2. 分析思路3. 代码实现 1. 演示效果 2. 分析思路 先编写动画&#xff0c;让风扇先转起来。使用 js 控制动画的持续时间。监听按钮的点击事件&#xff0c;在事件中修改元素的animation-duration属性。 3. 代码实现 <!DOCTYPE html> <html lang…
阅读更多...
Spring IOC控制反转、DI注入以及配置

Spring IOC控制反转、DI注入以及配置

1.使用xml的方式进行配置IOC容器&#xff0c;首先引入依赖 在Resource资源下配置&#xff0c;applicationContext.xml ,刷新mevan后可以直接选择配置spring.xml文件 <!-- spring核心用来管理bean --><dependency><groupId>org.springframework</g…
阅读更多...
代码随想录算法训练营Day42|LC416 分割等和子集

代码随想录算法训练营Day42|LC416 分割等和子集

一句话总结&#xff1a;背包问题。 原题链接&#xff1a;416 分割等和子集 拿到题先明确这是动态规划的题&#xff0c;具体类型是01背包问题。到了题目解法这里&#xff0c;首先判断数组加和是否为偶数&#xff0c;否则return false。然后就是01背包问题的解题思路了。具体地&…
阅读更多...
InterliJ IDEA基本设置

InterliJ IDEA基本设置

安装好idea后&#xff0c;将软件打开&#xff0c;可以进行基础设置 1.打开软件&#xff0c;先安装插件-汉化包&#xff08;不推荐&#xff0c;最好使用英文版&#xff09;&#xff0c;本次我们使用汉化版本完成基本设置&#xff0c;后期希望大家适应英文版的开发环境。&#x…
阅读更多...
【Vue3源码学习】— CH2.7 Computed: Vue 3 计算属性深入解析

【Vue3源码学习】— CH2.7 Computed: Vue 3 计算属性深入解析

Computed: Vue 3 计算属性深入解析 1.计算属性的基本用法2. ComputedRefImpl 类深入解析JavaScript 中的 getter 函数 3. 计算属性的创建&#xff1a;computed 方法解析3.1 源码解析3.2 使用示例 4. 计算属性的工作原理5. 手动实现简化的计算属性6. 结语 在 Vue 3 的响应式系统…
阅读更多...
最新文章

Copyright @ 2022~2023