Flutter——Column组件(垂直布局组件)
Column组件的常用属性
属性 | 说明 |
mainAxisAlignment
|
主轴的排序方式
|
crossAxisAlignment
|
次轴的排序方式 |
children
|
组件子元素
|
- import 'package:flutter/material.dart';
- void main() {
- runApp(MaterialApp(
- title: "ColumnWidget",
- home: MyApp(),
- ));
- }
- class MyApp extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Container(
- width: 400,
- height: 600,
- color: Colors.black45,
- child: Column(
- mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 主轴元素的排序方式(垂直布局,Y轴是主轴)
- crossAxisAlignment: CrossAxisAlignment.end, // 次轴元素的排序方式
- children: <Widget>[
- Container(
- color: Colors.orange,
- width: 80,
- height: 80,
- ),
- Container(
- color: Colors.redAccent,
- width: 80,
- height: 80,
- ),
- Container(
- color: Colors.teal,
- width: 80,
- height: 80,
- )
- ],
- ),
- )
- );
- }
- }
Flutter——Column组件(垂直布局组件)的更多相关文章
- 【Flutter实战】六大布局组件及半圆菜单案例
老孟导读:Flutter中布局组件有水平 / 垂直布局组件( Row 和 Column ).叠加布局组件( Stack 和 IndexedStack ).流式布局组件( Wrap )和 自定义布局组件 ...
- 技术胖Flutter第三季-15垂直布局Column组件
博客地址: https://jspang.com/post/flutter3.html#toc-8eb 垂直布局 左对齐: crossAxisAlignment: CrossAxisAlignment ...
- Flutter常用布局组件
Flutter控件本身通常由许多小型.单用途的控件组成,结合起来产生强大的效果,例如,Container是一种常用的控件,由负责布局.绘画.定位和大小调整的几个控件组成,具体来说,Container是 ...
- Andriod中textview垂直水平居中及LinearLayout内组件的垂直布局
1.textview 垂直水平居中的设置 Android:gravity="center_vertical|center" 2.LinearLayout中设置控件垂直布局,默认的是 ...
- 【Flutter学习】页面布局之基础布局组件
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- 技术胖Flutter第三季-18布局CardWidget 卡片布局组件
技术胖Flutter第三季-18布局CardWidget 卡片布局组件 博客地址: https://jspang.com/post/flutter3.html#toc-420 最外面是Card布局,里 ...
- Flutter入门之无状态组件
Flutter核心理念 flutter组件采用函数式响应框架构建,它的灵感来自于React.它设计的核心思想是组件外构建UI,简单解释一下就是组件鉴于它当前的配置和状态来描述它的视图应该是怎样的,当组 ...
- Flutter——Expanded组件("可伸缩"组件)
Expanded组件可以结合Row和Column布局组件使用. Expanded组件的常用属性 属性 说明 flex 元素占整个父Row/Column的比例 child 子元素 import 'pac ...
- Jetpack Compose学习(5)——从登录页美化开始学习布局组件使用
原文:Jetpack Compose学习(5)--从登录页美化开始学习布局组件使用 | Stars-One的杂货小窝 本篇主要讲解常用的布局,会与原生Android的布局控件进行对比说明,请确保了解A ...
随机推荐
- PowerDesigner常用命令
在Tools=>Execute Commands下的Edit/Run Scripts,或者通过Ctrl+Shift+X就可以运行脚本.如图: 1.将所有的表名和列名都修改为大写 '******* ...
- Ambiguous mapping. Cannot map 'appController' method
笔者最初的一套代码模板 import lombok.extern.slf4j.Slf4j; import org.springframework.stereotype.Controller; impo ...
- Python简单遍历字典及删除元素的方法
Python简单遍历字典及删除元素的方法 这篇文章主要介绍了Python简单遍历字典及删除元素的方法,结合实例形式分析了Python遍历字典删除元素的操作方法与相关注意事项,需要的朋友可以参考下 具体 ...
- getchwd() 函数返回当前工作目录。
getchwd() 函数返回当前工作目录.
- 第二章 python之计算机基础
@python基础 零基础就是个幌子,因为零基础什么都干不了. 如果零基础随随便便就把自动化做起来,那自动化测试就不值钱了:因为这种简单的事情,谁都可以做到. 本课程从零基础出发,补足基础后,不仅仅学 ...
- python logging模块【转载】
转自:https://www.cnblogs.com/dahu-daqing/p/7040764.html 参考:老顽童log模块,讲的很细致,基本上拿到手就可以直接用了,很赞 1 logging模块 ...
- 日志.VC
1. int WriteLog(char* _pcFullFileName, char* _pcWrite, int _iWriteLen, unsigned long * _pdwWritten) ...
- 最新 东方明珠java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.东方明珠等10家互联网公司的校招Offer,因为某些自身原因最终选择了东方明珠.6.7月主要是做系统复习.项目复盘.Leet ...
- 在HTML5 中使用 kindeditor 的方法
1.打开:http://kindeditor.net/ke4/examples/default.html 2.查看源代码,另存为 3.打开http://kindeditor.net/demo.php, ...
- [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar中的类解压后放在运行jar中
前文: [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar打在jar包中 使用7z打开压缩包,查看所有依赖的jar都被解压以包名及class的方式存储在了运行jar中,此时jar的 ...