Flutter之Flex组件布局

目录

Flex属性值

轴向:direction:Axis.horizontal

主轴方向:mainAxisAlignment:MainAxisAlignment.center

交叉轴方向:crossAxisAlignment:CrossAxisAlignment

主轴尺寸:mainAxisSize

文字方向:textDirection:TextDirection

竖直方向排序:verticalDirection:VerticalDirection

基线对齐方式:textBaseline:TextBaseline

使用方法

第一种写法

第二种写法 


Flex属性值

 

轴向:direction:Axis.horizontal

enum Axis {horizontal,//水平vertical,//竖直
}

主轴方向:mainAxisAlignment:MainAxisAlignment.center

enum MainAxisAlignment {start,//顶头end,//接尾center,//居中spaceBetween,//顶头接尾,其他均分spaceAround,//中间的孩子均分,两头的孩子空一半spaceEvenly,//均匀平分}

交叉轴方向:crossAxisAlignment:CrossAxisAlignment

enum CrossAxisAlignment {start,//顶头end,//接尾center,//居中stretch,//伸展baseline,//基线
}

主轴尺寸:mainAxisSize

enum MainAxisSize {min,max,
}

文字方向:textDirection:TextDirection

enum TextDirection {ltr,//从左到右rtl,//从右到左
}

竖直方向排序:verticalDirection:VerticalDirection

enum VerticalDirection{up,down,
}

基线对齐方式:textBaseline:TextBaseline

enum TextBaseline {alphabetic,ideographic,
}

 

使用方法

第一种写法

Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.stretch,children: [Flexible(flex: 1,child: Container(color: Colors.red,width: 100, // 宽度固定height: double.infinity, // 纵向填满),),Flexible(flex: 2,child: Container(color: Colors.blue,width: 100,height: double.infinity,),),],)

第二种写法 

import 'dart:async';import 'package:flutter/material.dart';
import 'package:flutter_diancan/pages/layout/login_page.dart';
import 'package:flutter_diancan/pages/home/home_page.dart';
import 'package:flutter_diancan/stores/user_store.dart';
import 'package:provider/provider.dart';class Startpage extends StatelessWidget {const Startpage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(centerTitle: true,title: Text("首页"),),body: Center(child: testFlex()));}testFlex() {var redBox = Container(color: Colors.red,height: 80,width: double.infinity,child: const Text("红"),);var blueBox = Container(color: Colors.blue,height: 80,width: double.infinity,child: const Text("蓝"),);var yellowBox = Container(color: Colors.yellow,height: 80,width: double.infinity,child: const Text("黄"),);var greenBox = Container(color: Colors.green,height: 80,width: double.infinity,child: const Text("绿"),);var show = Flex(direction: Axis.vertical,crossAxisAlignment: CrossAxisAlignment.start,textBaseline: TextBaseline.alphabetic,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[redBox, blueBox, yellowBox, greenBox],mainAxisSize: MainAxisSize.max,);return show;}
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

灵猫论文好用吗 #媒体#笔记

灵猫论文是一款专门用于论文写作、查重降重的工具&#xff0c;它的使用方便、高效&#xff0c;深受广大论文作者的喜爱。那么&#xff0c;灵猫论文到底好用吗&#xff1f;答案是肯定的&#xff01; 首先&#xff0c;灵猫论文提供了强大的查重降重功能&#xff0c;能够帮助用户快…

MySQL8.0新特性详解及全局优化

文章目录 一、前言二、开窗函数三、新增函数索引四、group by不再隐式排序五、新增降序索引六、binlog日志文件过期时间精确到秒七、undo文件不再使用系统表空间八、默认字符集由latin1变为utf8mb4九、自增变量持久化十、删除了.frm等文件 一、前言 目前MySQL8.0及以上版本在我…

Commitizen:规范化你的 Git 提交信息

简介 在团队协作开发过程中&#xff0c;规范化的 Git 提交信息可以提高代码维护的效率&#xff0c;便于追踪和定位问题。Commitizen 是一个帮助我们规范化 Git 提交信息的工具&#xff0c;它提供了一种交互式的方式来生成符合约定格式的提交信息。 原理 Commitizen 的核心原…

Vue3跟Vue2比,性能真的有所提升吗?

答案是肯定的。 说起Vue3的改进&#xff0c;很多人都会说出响应式的改变&#xff0c;与Vue2相比&#xff0c;Vue3采用了proxy的方式对响应式做了重写&#xff0c;而Vue2则是采用defineProperty的方式将对象的属性进行深度遍历&#xff0c;而这种方式想要实现响应式的前与后&am…

每日学习笔记:C++ STL算法之容器元素复制与搬移

本文API 复制元素&#xff1a; copy() copy_if(....,op) copy_n() copy_backward() 搬移元素&#xff1a; move() move_backward() 复制元素 搬移元素

SQL注入利用学习-Union联合注入

联合注入的原理 在SQL语句中查询数据时&#xff0c;使用select 相关语句与where 条件子句筛选符合条件的记录。 select * from person where id 1; #在person表中&#xff0c;筛选出id1的记录如果该id1 中的1 是用户可以控制输入的部分时&#xff0c;就有可能存在SQL注入漏洞…

Python爬虫与API交互:如何爬取并解析JSON数据

目录 前言 一、什么是API和JSON数据 二、准备环境 三、发送API请求并获取数据 四、解析JSON数据 五、完整代码示例 六、总结 前言 随着互联网的发展&#xff0c;越来越多的网站提供了API接口&#xff0c;供开发者获取实时数据。在爬虫领域中&#xff0c;与API交互并解析…

Pytorch中nn.Linear使用方法

nn.Linear定义一个神经网络的线性层&#xff1a; torch.nn.Linear(in_features, # 输入的神经元个数out_features, # 输出神经元个数biasTrue # 是否包含偏置)nn.Linear其实就是对输入&#xff08;n表示样本数量&#xff0c;i表示样本特…

【数据结构与算法】力扣 142. 环形链表 II

题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统…

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第二套

华为海思校园招聘-芯片-数字 IC 方向 题目分享&#xff08;有参考答案&#xff09;——第二套&#xff08;共九套&#xff0c;每套四十个选择题&#xff09; 部分题目分享&#xff0c;完整版获取&#xff08;WX:didadidadidida313&#xff0c;加我备注&#xff1a;CSDN huawei…

Git-LFS 远程命令执行漏洞 CVE-2020-27955 漏洞复现

今天遇到了一个比较有意思的洞&#xff0c;复现一下下.......... 漏洞描述 Git LFS 是 Github 开发的一个 Git 的扩展&#xff0c;用于实现 Git 对大文件的支持 一些受影响的产品包括Git&#xff0c;GitHub CLI&#xff0c;GitHub Desktop&#xff0c;Visual Studio&#xff0…

51单片机之自己配串口寄存器实现波特率9600

本配置是根据手册进行开发配置的 1、首先配置SCON 所以综上所诉 SCON 0x40 &#xff08;0100 0000&#xff09; 2、PCON不用配置 3、配置定时器1 4、波特率的计算 5、配置AUXR 6、对比 7、实现 8、优化&#xff08;实现字符串&#xff09; 引入TI &#xff08;智能延时&…

对于嵌入式工程师,需要掌握的知识是广还是精?

我刚开始接触嵌入式的时候&#xff0c;感觉学这个好变态啊。 要学的东西太多了&#xff0c;数字电路、模拟电路、C语言、汇编、51单片机、Protel 99SE、Pcb Layout、STM32单片机、RTOS、Linux、ARM等等.... 可以说&#xff0c;随便拿个魔法电路出来&#xff0c;想达到精的程度&…

【C++】C++11可变参数模板

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 可变参数模板的定义…

Java绘图坐标体系

一、介绍 下图说明了Java坐标系。坐标原点位于左上角&#xff0c;以像素为单位。在Java坐标系中&#xff0c;第一个是x坐标&#xff0c;表示当前位置为水平方向&#xff0c;距离坐标原点x个像素&#xff1b;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐…

LLM大语言模型(九):LangChain封装自定义的LLM

背景 想基于ChatGLM3-6B用LangChain做LLM应用&#xff0c;需要先了解下LangChain中对LLM的封装。本文以一个hello world的封装来示例。 LangChain中对LLM的封装 继承关系&#xff1a;BaseLanguageModel——》BaseLLM——》LLM LLM类 简化和LLM的交互 _call抽象方法定义 ab…

操作系统理论知识快速总览

操作系统整体架构 搬出考研时的思维导图 操作系统主要分为 批处理系统(老古董&#xff0c;基本不用了)实时操作系统(嵌入式中使用较多&#xff0c;RTOS)分时操作系统(PC中使用较多&#xff0c;Linux&#xff0c;Windows) 分时操作系统和实时操作系统的使用场景不同&#xf…

【蓝桥杯第十二届省赛B】(部分详解)

空间 8位1b 1kb1024b(2^10) 1mb1024kb(2^20) 时间显示 #include <iostream> using LLlong long; using namespace std; int main() {LL t;cin>>t;int HH,MM,SS;t/1000;SSt%60;//like370000ms370s,最后360转成分余下10st/60;MMt%60;t/60;HHt%24;printf("%02d:…

[C语言]——动态内存管理

目录 一.为什么要有动态内存分配 二.malloc和free 1.malloc 2.free 三.calloc和realloc 1.calloc 2.realloc 3.空间的释放​编辑 四.常见的动态内存的错误 1.对NULL指针的解引用操作 2.对动态开辟空间的越界访问 3.对非动态开辟内存使用free释放 4.使用free释放⼀块…

外汇110:谷歌起诉应用程序开发商伪造加密投资APP诈骗!

谷歌&#xff08;Google&#xff09;已对两家应用程序开发商提起诉讼&#xff0c;指控其参与“国际在线消费者投资欺诈计划”。该计划欺骗用户从 Google Play 商店和其他渠道下载虚假的安卓&#xff08;Android&#xff09;应用程序&#xff0c;并以承诺更高回报为幌子窃取他们…