flutter- Row Column Expanded ListView

简介: flutter- Row Column Expanded ListView
Row
继承

Object-> Diagnosticable ->DiagnosticableTree-> Widget ->RenderObjectWidget ->MultiChildRenderObjectWidget-> Flex-> Row


介绍

一个小部件,用于在水平数组中显示其子项。要使子项扩展以填充可用的水平空间,请将子项包装在Expanded小部件中。“ 行”窗口小部件不会滚动(并且通常将行中的子项多于可用空间中的子项被视为错误)。如果您有一系列小部件并希望它们能够在没有足够空间时滚动,请考虑使用ListView。有关垂直变体,请参见列。如果您只有一个孩子,请考虑使用Align或Center来定位孩子。

Code

此示例将可用空间划分为三个(水平),并将文本放在前两个单元格中心,将Flutter徽标放在第三个中心:

Row(
  children: <Widget>[
    Expanded(
      child: Text('Deliver features faster', textAlign: TextAlign.center),
    ),
    Expanded(
      child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
    ),
    Expanded(
      child: FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: const FlutterLogo(),
      ),
    ),
  ],
)
构造方法
  Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.horizontal,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
}
主轴

横向排列 水平主轴,纵向侧轴

侧轴
MainAxisAlignment

子控件主轴放置方式

enum MainAxisAlignment {
  start,  // 尽可能靠近主轴的起点
   end, // 尽可能靠近主轴末端的地方
  center, // 尽可能近主轴中间的地方
  spaceBetween, // 在子控件中间均匀地放置自由空间,第一个前和最后一个后无空间
  spaceAround,  // 在子控件中间均匀地放置自由空间,同时也放置一半空间在第一个前和最后一个控件后。
  spaceEvenly,  // 在第一个控件和最后一个控件之前和之后均匀地放置自由空间
}
MainAxisSize
 enum MainAxisSize {
  min, // 控件尽可能小(取此值时,上面的MainAxisAlignment 无效)
  max, //  控件尽可能大
}
CrossAxisAlignment

侧轴方向的放置方式

enum CrossAxisAlignment {
  start,  // 子控件都父控件的项部
  end, // 子控件都在父控件的底部
  center, // 子控件居父控件的中部
  stretch, // 子控件填满主轴,( 使用此值时,子控件一定要设置width或height)
  baseline, // 当子控件是Text时有效,并要设置下面的TextBaseLine属性
}
黄色和黑色警告条纹

解决方法是将子项包装在Expanded小部件中,该小部件告诉行应该为子项提供剩余空间:

Column
Flexible

this.fit = FlexFit.loose

Expanded 继承与Flexible

会尽可能的充满分布在Row, Column, or Flex的主轴方向上;或者会按照flex等比例平分剩余空间

强制子组件填充可用空间

this.fit = FlexFit.tight

FlexFit

tight(紧) 子元素被要求填补可用的空间。

loose(宽松) 子元素最多可以与可用的空间一样大(但允许更小)。

ListView

可滚动的widget 相当于andorid中的 scrollview和listview合体

相关文章
关于 Flutter中的TextFiled不可以直接在Row中使用的问题
TextFiled不可以直接在Row中使用的问题,报错简单修改方法
|
6月前
Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套
Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套 在 Flutter 中,ListView 和 PageView 是两个常用的控件,它们可以用于滑动展示大量内容的场景,且支持各种嵌套方式,本文将介绍其中的一些花式嵌套方式。
263 0
|
18天前
|
UED 开发者 容器
Flutter&鸿蒙next 中的 Expanded 和 Flexible 使用技巧详解
在 Flutter 开发中,Expanded 和 Flexible 是两个常用的布局控件,用于管理 UI 布局的空间分配。Expanded 使子组件占据主轴上的所有剩余空间,而 Flexible 允许通过 flex 参数按比例分配空间。掌握两者的区别和使用场景,可以让你在构建复杂 UI 时更加得心应手。
70 1
|
3月前
|
UED
Flutter之ListView实现自动滑动到底部
Flutter之ListView实现自动滑动到底部
211 1
|
4月前
Flutter 列表学习(listview,gridview,ExpansionTile,ScrollController,RefreshIndicator)
Flutter 列表学习(listview,gridview,ExpansionTile,ScrollController,RefreshIndicator)
|
5月前
Flutter 一行Row中显示RadioListTile
Flutter 一行Row中显示RadioListTile
98 0
|
6月前
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ListView
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ListView
59 0
Flutter灵活布局要掌握的两个控件Expanded和Flexible
Flutter灵活布局要掌握的两个控件Expanded和Flexible
|
缓存
【布局 widget】Flutter ListView
ListView 是最常用的滚动 widget,也是布局 widget。它在滚动方向上一个接一个地显示它的 child。
246 0
【布局 widget】Flutter ListView