Flutter Row

最新推荐文章于 2024-07-07 10:26:08 发布
最新推荐文章于 2024-07-07 10:26:08 发布
阅读量357 收藏 1
点赞数
分类专栏： fflutter组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiahua123_dongzhou/article/details/108390260
版权
本文介绍了Flutter中的Row组件，包括其作为水平布局容器的功能，如何使用Expanded填充剩余空间，以及Row的主轴对齐方式（MainAxisAlignment）和交叉轴对齐方式（CrossAxisAlignment）。通过示例代码展示了不同对齐方式的效果。
摘要由CSDN通过智能技术生成

Flutter Row

1 Row

Row 是一个可以沿水平方向展示它的子组件的组件。

它还可以灵活布局，如果要让某个子组件填充满剩余剩余空间，请使用 Expanded 组件包裹该组件即可。

Row 组件是不可以滚动的，所以在 Row 组件中一般不会放置过多子组件，如果需要滚动的话应该考虑使用 ListView。

如果需要垂直展示，应该考虑 Column 组件。

如果只有一个子组件的话，应该考虑使用使用 Align 或者 Container 组件来定位这个子组件。

说了这么多，对我来说，Row 就是一个 orientation 为 horizontal 的 LinearLayout。

常用属性

crossAxisAlignment 子组件沿着 Cross 轴（在 Row 中是纵轴）如何摆放，其实就是子组件对齐方式，可选值有
CrossAxisAlignment.start 子组件在 Row 中顶部对齐
CrossAxisAlignment.end 子组件在 Row 中底部对齐
CrossAxisAlignment.center 子组件在 Row 中居中对齐
CrossAxisAlignment.stretch 拉伸填充满父布局
CrossAxisAlignment.baseline 在 Row 组件中会报错
m
最低0.47元/天 解锁文章
jiahua123_dongzhou
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter开发：Row中的子控件左右两端对齐的设置方式
软贱开发攻城狮
12-30 3396
前言 在Flutter开发过程中，对于UI界面的布局操作也是很重要的技能，尤其是根据实际业务需求的等比例显示、等分展示、对称显示、两端对齐等等，这些都是比较常见的操作，那么本文就来分享一下关于两端对齐的设置，对于不熟悉布局的开发者来说可以好好了解一下，本文以Row中的子控件左右两端对齐的方式来介绍，方便查阅使用。 关于Row中的子控件左右两端对齐的方式有四种方式来设置，针对同一行的左右两端对齐的需求，很容易实现，而且实现方法也有四种：通过设置spaceBetween 对齐方式、通过使用Expande
Flutter系列--Row属性
徐新的博客
08-27 2888
mainAxisSize： 表示Row在主轴(水平)方向占用的空间，默认是MainAxisSize.max，表示尽可能多的占用水平方向的空间，此时无论子widgets实际占用多少水平空间，Row的宽度始终等于水平方向的最大宽度 而MainAxisSize.min表示尽可能少的占用水平空间，当子widgets没有占满水平剩余空间，则Row的实际宽度等于所有子widgets占用的的水平空间； mainAxisAlignment：表示子Widgets在Row所占用的水平空间内对齐方式 ...
Flutter常用布局集合
jiahua123_dongzhou的博客
08-31 851
容器组件（Container） 容器组件（Container）是一个组合Widget，内部有绘制Widget、定位Widget和尺寸Widget，包含一个子Widget,自身具备如alignment、pading等基础属性，方便布局过程中摆放child。Container组件常用属性如下表： 属性名 类型 说明 key Key Container唯一表示符，用于查找更新 alignment AlignmentGeometry 控制child的对齐方式，如果Container或Contai
flutter之Row
青年码农
08-15 526
1RowRow是一个用于水平展示多个子控件的控件。row这个控件不会滚动。如果你有一行控件在空间不足的情况下可以滚动，考虑使用ListView类。2构造函数Row({ Key key, MainAxisAlignment mainAxisAlignment, MainAxisSize mainAxisSize, CrossAx...
无涯教程-Flutter - Row&Column
最新发布
无涯教程
07-07 913
在前面的部分中，无涯教程学习了如何创建一个简单的Flutter应用程序及其对小部件的基本样式。现在，无涯教程将学习如何在屏幕上的行和列中排列小部件。行(rows)和列(columns)不是单个窗口小部件；它们是两个不同的小部件，分别是行和列。在这里，无涯教程将把这两个小部件集成在一起，因为它们具有相似的属性，可帮助无涯教程高效，快速地理解它们。
Flutter 布局（七）- Row、Column详解
weixin_34023982的博客
08-01 532
本文主要介绍Flutter布局中的Row、Column控件，详细介绍了其布局行为以及使用场景，并对源码进行了分析。 1. Row A widget that displays its children in a horizontal array. 1.1 简介 在Flutter中非常常见的一个多子节点控件，将children排列成一行。估计是借鉴了Web中Flex布局，所以很多属性和表现，...
Flutter 基础布局之Row
u013474690的博客
03-24 1万+
Row意为水平布局，可以使其包含的子控件按照水平方向排列 代码如下： class _TestState extends State<Test> { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container( width: MediaQuery.of(context).size.width,
Flutter 中的 Row 小部件：全面指南
smileKH的博客
05-12 742
Row是 Flutter 中处理水平布局的核心小部件，它提供了丰富的对齐和间距选项，使得在 Flutter 应用中实现各种水平布局变得简单而高效。掌握Row的使用，可以帮助你创建出既美观又实用的布局界面。
Flutter Row、Column 参数详解
陈英有
11-08 6325
1.继承关系 Object &gt; Diagnosticable &gt; DiagnosticableTree &gt; Widget &gt; RenderObjectWidget &gt; MultiChildRenderObjectWidget &gt; Flex &gt; Row、Column 2.Row介绍  在水平方向上排列子widget的列表，如android的线性布局设...
Flutter——最详细的Row(横向)布局使用教程
人生在世
11-29 5238
Row简介 横向排列内部布局，可容纳多个组件。 属性 作用 mainAxisAlignment 主轴对齐 crossAxisAlignment 横轴对齐 textBaseline 文字基线 textDirection 竖直方向 mainAxisSize 主轴尺寸 children 子布局单位：（数组） 创建一个横向排列的布局 import 'package:flutter/material.dart'; class RowWidget extends Statel
Flutter 边框
qq_43000621的博客
06-10 358
1、四边边框 decoration: BoxDecoration( border: Border.all( color: Color(0xaaff0000), width: 3.0, style: BorderStyle.solid ) ), 2、单边边框 decoration: BoxDecoration( border: Border( bottom: BottomSide( color: Color(0xaaff0000), wi
Flutter(四)之Flutter的布局Widget
goodswifter
04-26 777
一. 单子布局组件 二. 多子布局组件
Flutter Widgets 之 Row和Column
老孟Flutter
02-20 1089
注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 在Row和Column中有一个非常重要的概念：MainAxisAlignment（主轴）和CrossAxisAlignment（交叉轴），简单来说，MainAxisAlignment（主轴）就是与当前控件方向一致的轴，而CrossAxisAlign...
flutter 控件加一个边框，还是渐变的
weixin_44911775的博客
04-08 469
最外层用一个渐变的背景，然后用padding: const EdgeInsets.all(1)就可以了。
Flutter-Row的使用说明
lvsonghai的博客
02-07 4191
Flutter-Row的使用说明 Row的定义 Row和Container，Column，Stash基本上一样，都是一种存放其他Widget的容器，不同点在于Row、Column、Stash中存放的是一组Widget；Row具体请查看Row的定义： Row({ Key key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.star...
Flutter Row 或者 Column 的拉伸效果，CrossAxisAlignment.stretch
豪冷的博客
10-19 1807
CrossAxisAlignment.stretch 不生效？ Flutter 版本：2.5.1 布局代码如下，加 Container 是为了设置个背景颜色，看效果，单独使用 Row 也一样： ElevatedButton(onPressed: buttonAction, child: const Text("切换布局样式")), Text(text), Container( // height: 100, color: Colors.black12, child: Row( ......
Flutter 基础组件之 Row、Column
热门推荐
禽兽先生不禽兽
12-28 2万+
1 Row Row 是一个可以沿水平方向展示它的子组件的组件。 它还可以灵活布局，如果要让某个子组件填充满剩余剩余空间，请使用 Expanded 组件包裹该组件即可。 Row 组件是不可以滚动的，所以在 Row 组件中一般不会放置过多子组件，如果需要滚动的话应该考虑使用 ListView。 如果需要垂直展示，应该考虑 Column 组件。 如果只有一个子组件的话，应该考虑使用使用 Ali...
flutter封装ROW横向布局
梨子社区
05-20 247
import 'package:color_dart/color_dart.dart'; import 'package:flutter/material.dart'; class ARow extends StatelessWidget { final double height; final Widget leftChild; final Widget centerChild; final Widget rightChild; final EdgeInsets padding; .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值