flutter组件————Row和Column

Row和Column

在Flutter中,Row 和 Column 是两个非常常用的布局组件,它们用于按照水平或垂直方向排列子组件。

Row

Row 组件是一个将子组件沿水平方向(从左到右)排列的控件。它通常用于创建一行中的多个小部件,比如文本、按钮等。

Column

Column 组件与 Row 类似,但它将子组件沿垂直方向(从上到下)排列。

参数

参数名称 类型 说明 默认值
mainAxisAlignment MainAxisAlignment 主轴对齐方式,控制子组件沿主轴(Row为水平,Column为垂直)的排列方式 MainAxisAlignment.start
mainAxisSize MainAxisSize 主轴大小,定义了RowColumn占用的空间大小 MainAxisSize.max
crossAxisAlignment CrossAxisAlignment 横轴对齐方式,控制子组件沿横轴(Row为垂直,Column为水平)的对齐方式 CrossAxisAlignment.center
textDirection TextDirection 文本方向,指定子组件的布局顺序是从左往右还是从右往左 系统默认值
verticalDirection VerticalDirection 垂直方向,用于指定子组件在纵轴上的排列方向(Row组件适用) VerticalDirection.down
textBaseline TextBaseline crossAxisAlignment设置为CrossAxisAlignment.baseline时使用,以基线对齐文本组件
children List 要显示的子组件列表 空列表

注意

  • RowColumn 组件不支持滚动,如果需要滚动功能应该使用 ListView 或者 SingleChildScrollView
  • ExpandedFlexible 是两个可以用来控制子组件如何分配空间的组件,当它们作为 RowColumn 的直接子组件时特别有用。
  • textDirection 对于 Column 来说不是必须的,因为它的子组件通常不会依赖文本方向来决定其布局顺序。但对于 Row,它是必要的,除非父级已经提供了文本方向。
  • textBaseline 只有在 crossAxisAlignment 设置为 CrossAxisAlignment.baseline 时才有效,它用于确定哪些文本基线用于对齐。
  • verticalDirection: 这个参数只在 Column 中默认有效,用于指定子组件在纵轴上的排列方向。但在 Row 中也可以设置此参数,它会影响当 textDirection 为 null 时,且需要确定 CrossAxisAlignment.startCrossAxisAlignment.end 的位置。

代码示例

dart 复制代码
class _RowColumPageState extends State<RowColumPage> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 主轴对齐方式
          mainAxisSize: MainAxisSize.max, // 主轴大小
          textDirection: TextDirection.rtl,  // 文本方向
          textBaseline:  TextBaseline.alphabetic, // 文本基线
          children: [
            Text("Row内容1"),
            Text("Row内容2"),
            Text("Row内容3"),
            Text("Row内容4"),
            Text("Row内容5")
          ], // Row内容
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start, // 横轴对齐方式
          mainAxisSize: MainAxisSize.max, // 主轴大小
          textDirection: TextDirection.rtl,  // 文本方向
          textBaseline:  TextBaseline.alphabetic, // 文本基线
          children: [
            Text("Column内容1"),
            Text("Column内容2"),
            Text("Column内容3"),
            Text("Column内容4"),
            Text("Column内容5")
          ], // Column内容
        )
      ],
    );
  }
}

效果

相关推荐
技术蔡蔡4 小时前
Flutter和Firebae简单的聊天应用
flutter·全栈·firebase
小蜜蜂嗡嗡19 小时前
flutter封装vlcplayer的控制器
前端·javascript·flutter
你听得到111 天前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
哲科软件2 天前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风2 天前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly
aiprtem2 天前
基于Flutter的web登录设计
前端·flutter
coder_pig2 天前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
程序员老刘2 天前
Android 16开发者全解读
android·flutter·客户端
Jalor2 天前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
吴Wu涛涛涛涛涛Tao2 天前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios