flutter之垂直布局Column的使用

最新推荐文章于 2024-04-05 04:21:46 发布
最新推荐文章于 2024-04-05 04:21:46 发布
阅读量1k 收藏 2
点赞数
文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34497319/article/details/99645653
版权

Colum组件即垂直布局控件，能够将子组件垂直排列
比如现在我们要制作三个按钮，并让三个按钮垂直布局，这里用的不灵活布局与灵活布局混用，效果和代码如下:
在这里插入图片描述
写一段代码，在column里加入三行文字，然后看一下效果:

crossAxisAlignment: CrossAxisAlignment.center文字居中对齐

  • CrossAxisAlignment.star：居左对齐。
  • CrossAxisAlignment.end：居右对齐。
  • CrossAxisAlignment.center：居中对齐。

主轴和副轴的对齐方式 mainAxisAlignment属性，意思就是主轴对齐方式
main轴：如果你用column组件，那垂直就是主轴，如果你用Row组件，那水平就是主轴。
cross轴：cross轴我们称为幅轴，是和主轴垂直的方向。比如Row组件，那垂直就是幅轴，Column组件的幅轴就是水平方向的。
mainAxisAlignment: MainAxisAlignment.center,主轴 垂直方向居中

Expanded灵活布局。让中间区域变大，而头部区域和底部根据文字所占空间进行显示。

畅想未来~cc
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter布局组件之Align
01-20
对齐与相对定位（Align） flutter通过Stack和Positioned，可以指定一个或多个子元素相对于父元素各个边的精确偏移，并且可以重叠。但如果我们只想简单的调整一个子元素在父元素中的位置的话，使用Align组件会更简单一些。 1.Align Align 组件可以调整子组件的位置，并且可以根据子组件的宽高来确定自身的的宽高，定义如下： Align({ Key key, this.alignment = Alignment.center, this.widthFactor, this.heightFactor, Widget child, }) 属性： 1.al
Flutter 通过 Column 实现垂直布局
01-07
效果图：  lib\main.dart 代码： import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter Column'),
Flutter 布局（七）- Row、Column详解
最新发布
goodhighting的博客
04-05 287
对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！当你有了学习线路，学习哪些内容，也知道以后的路怎么走了，理论看多了总要实践的最后，互联网不存在所谓的寒冬，只是你没有努力罢了！《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！
【flutter】Row和Column组件
devnn的专栏
05-02 4077
Row和Column是flutter中最基础的容器组件，Row用来水平放置子组件，Column用来垂直放置子组件。它们都可以设置子组件的对齐方式。重点需要了解它们有哪些对齐方式，以及如何对齐的。 布局特点 Row在水平方向会尽可能大，大到会撑满parent；在垂直方向会尽可能小，小到能包裹住children。children在水平默认居左，垂直方向上默认居中。 Column在垂直方向上会尽可能大，...
Flutter 垂直居中
汤玉鹏
07-31 8671
import 'package:flutter/material.dart'; class CenterPage extends StatelessWidget { @override Widget build(BuildContext context) { return Material( child: Container( child: Column( mainAxisAlignment: MainAxisAlignment.cente.
flutter布局-1-column
liu__520的博客
11-04 1198
目录Column1、mainAxisAlignment：主轴布局方式，column主轴方向是垂直的方向2、crossAxisAlignment: 交叉轴的布局方式，对于column来说就是水平方向的布局方式3、textBaseline：字体的基线（基线这东西一直没搞懂，具体详见下一章Row，效果更明显，垂直方向没啥用，不明显）4、textDirection：文字布局方向5、verticalDire...
Flutter 基础布局之Column
u013474690的博客
03-27 9423
Column意为垂直布局，可以使其包含的子控件按照垂直方向排列 代码如下： class _TestState extends State<DemoPage2> { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container( width: MediaQuery.of(context).siz
Flutter TextField设置高度之后文字无法垂直居中
m0_68349563的博客
03-07 1416
解决TextField设置高度之后文字不垂直居中的问题
Flutter基础学习 11-19 垂直布局Column组件
dpl12的博客
06-19 1092
前言：Column组件即垂直布局控件，能够将子组件垂直排列。其实前边学了Row组件就基本掌握了Column组件，里边的大部分属性都一样，我们还是以文字为例子，来看看Column布局。 一、Column基本用法 写一段代码，在column里加入三行文字，然后看一下效果。 import 'package:flutter/material.dart'; void main () => r...
Flutter开发（八）—— 五种布局之Column Widget垂直布局组件
RedKeyer的博客
04-26 332
Flutter开发（八）—— 五种布局之ColumnWidget
Flutter TextField 垂直居中
萌萌新的小菜鸟
02-25 2865
Flutter现学现用, 碰到一个问题: TextField 内容不垂直居中. 度娘搜了半天没找到解决办法, 只能用G哥搜了… 使用textAlign,textAlignVertical分别设置水平居中,垂直居中. 但是, 如果有prefixIcon, 则会导致垂直居中无效, 需要添加isCollapsed: true. 参考: https://stackoverflow.com/questions/50591698/vertically-center-text-in-text-field-in-flut
Flutter：Center（居中布局），Padding（填充布局），Align（对齐布局）
01-08
文章目录Center （居中布局）Padding （填充布局）Align （对齐布局） Center （居中布局） 在Center布局中，子元素处于水平和垂直方向的中间位置。代码如下： void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title:
Flutter 页面布局 Wrap组件
01-07
Wrap组件实现流布局 //导入了Material UI组件库 ,快捷操作fim import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //...
Flutter 基本布局
01-20
本篇博客大致介绍了通过 Flutter 实现一些简单的页面布局，官方的参考文档： https://flutter.cn/docs/get-started/flutter-for/web-devs 首先，项目的入口如下，后面的所有操作都是对 container 变量进行更改 ...
Flutter样式和布局控件简析
03-01
搞前端的同学可能都习惯了CSS局部的思维，过去也出现过一些跟布局或者样式相关的标签，例如：big,center,font,s,strike,tt,u；...但是Flutter好像反其道而行之，样式糅合在结构里面，这样究竟有啥意思尼？首先
【Flutter入门到进阶】Flutter基础篇---基础组件
Yvan
03-01 1309
阿里巴巴图标库官网 iconfont.cn上有很多字体图标素材，我们可以 选择自己需要的图标打包下载后，会生成一些不同格式的字体文件，在Flutter中，我们使用ttf格式即可。// 设置图标示例//使用阿里图标库支持//图标库：https://material.io/tools/icons/appBar: AppBar(title: const Text("你好Flutter")),),));@override。
Jetpack Compose —— 深入理解 Column 布局
江小白的博客
06-12 1076
在本篇我们将深入了解 Column 的使用方法和特性，以帮助您更好地理解和应用 Jetpack Compose 中的 Column 布局。verticalArrangement：用于控制子元素在垂直方向上的排列方式，可以选择的值有 Top、Center、Bottom、SpaceEvenly、SpaceBetween 等。在这个示例中，我们在外层 Column 中嵌套了一个带有边距的内层 Column，实现了更灵活的布局结构。weight：用于控制子元素的权重，使其在垂直方向上占据不同比例的空间。
flutter的Column 的使用技巧(对齐、占满)
热门推荐
chuyouyinghe的专栏
07-02 1万+
//让子控件，水平居中右对齐 Column （ crossAxisAlignment: CrossAxisAlignment.start ） //让子控件，水平居中左对齐 Column （ crossAxisAlignment: CrossAxisAlignment.end ） //让子控件，水平居中对齐 Column （ crossAxisAlignment: CrossAxisAlignment.center ） //让子控件，水平占满父控件空间 Column （ .
flutter 保持控件位于底部布局
u013297881的专栏
12-06 1万+
@override Widget build(BuildContext context) { return Container( height: ScreenUtil().setHeight(320), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widg...
flutter 两列布局
09-11
Flutter中的两列布局可以通过使用Row和Column来实现。Row是一个水平排列的容器，Column是一个垂直排列的容器。 要创建一个包含两列的布局，可以在Row或Column中嵌套两个子容器。例如，要创建一个水平排列的两列布局...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值