第二章●第九节:列(Column)

作者: 白晓明 | 来源:发表于2019-05-07 07:15 被阅读10次
用于在垂直位置中显示子项的组件。若子项要填充水平空间,需要将子项置于Expanded组件(用于扩展Row、Column或Flex子项的组件)中。
列组件是不能滚动的(通常将列中溢出的子项视为错误的)。如果需要设置组件在没有足够空间滚动,考虑使用ListView。
官方示例将垂直位置划分为三块,前两个放置文本信息,后一个放置Flutter logo。
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("Column组件"),
        ),
        body: Column(
          children: <Widget>[
            Text("Deliver features faster"),
            Text("Craft beautiful UIs"),
            Expanded(
              child: FittedBox(
                fit: BoxFit.contain,
                child: FlutterLogo(),
              ),
            )
          ],
        ),
      ),
    );
  }
}
Column组件示例

我们可以通过crossAxisAlignment设置子组件的对齐方式,可以通过MainAxisSize.min设置列缩小以适合子组件。

Column属性
Column属性

总目录结构

相关文章

  • 第二章●第九节:列(Column)

    用于在垂直位置中显示子项的组件。若子项要填充水平空间,需要将子项置于Expanded组件(用于扩展Row、Colu...

  • 多列布局

    column-width: 列的宽度 column-count: 列的数量 column-gap: 列与列之间...

  • 多列布局

    column-width: 列的宽度 column-count: 列的数量 column-gap : 列与列的间...

  • css多列布局 multi-column(瀑布流布局)

    column-count :指定元素应该分为的列数 column-fill:指定css如何填充列 column-g...

  • 2018-02-06

    今天学了column-width、column-count、column-gap(列间距)、column-rule...

  • css3多列,用户界面

    1.css3多列 多列属性 column-count:分割开的列数 column-gap:列与列间的间隙 colu...

  • Excel-函数-column/match函数

    column函数: 用途:用于查找数值所在列的列值 方法:column(数值),返回列值 案例: 目标:查找“张三...

  • 2019-07-18

    css3:多列,postion 1.多列 column-count 属性指定了需要分割的列数。 column-wi...

  • css3多列

    1、column-count属性指定元素的列数。 2、column-gap属性指定的列之间的差距。 注意:如果列之...

  • CSS3多列布局

    定义列数column-count 在CSS3的多列布局中,我们可以使用column-count属性指定多列布局的列...

网友评论

    本文标题:第二章●第九节:列(Column)

    本文链接:https://www.haomeiwen.com/subject/zkedoqtx.html