P14. Flutter 垂直布局Column组件

Column组件即垂直布局控件,能够将子组件垂直排列。其实你学会了Row组件就基本掌握了Column组件,里边的大部分属性都一样,我们还是以文字为例子,来看看Column布局。

Column基本用法

写一段代码,在column里加入三行文字,然后看一下效果。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
          appBar: AppBar(
            title: Text('垂直方向布局'),
          ),
          body: Column(
            children: [
              Text('I am Mybj'),
              Text('my website is mybj123.com'),
              Text('I love coding')
            ],
          )),
    );
  }
}

这时候你会发现文字是以最长的一段文字居中对齐的,看起来很别扭。那如果想让文字以左边开始对齐,只需要加入一个对齐属性。

flutter Column基本用法

左对齐只要在column组件下body加入下面的代码,就可以让文字左对齐。

crossAxisAlignment: CrossAxisAlignment.start,
  • CrossAxisAlignment.star:居左对齐。
  • CrossAxisAlignment.end:居右对齐。
  • CrossAxisAlignment.center:居中对齐。
body: Column(
  children: [
    Text('I am Mybj'),
    Text('my website is mybj123.com'),
    Text('I love coding')
  ],
  crossAxisAlignment: CrossAxisAlignment.start,
)),

flutter文字左对齐

主轴和副轴的辨识

在设置对齐方式的时候你会发现右mainAxisAlignment属性,意思就是主轴对齐方式,那什么是主轴,什么又是副轴那。

  • main轴:如果你用column组件,那垂直就是主轴,如果你用Row组件,那水平就是主轴。
  • cross轴:cross轴我们称为幅轴,是和主轴垂直的方向。比如Row组件,那垂直就是副轴,Column组件的副轴就是水平方向的。

主轴和副轴我们搞清楚,才能在实际工作中随心所欲的进行布局。

比如现在我们要把上面的代码,改成垂直方向居中。因为用的是Column组件,所以就是主轴方向,这时候你要用的就是主轴对齐了。

mainAxisAlignment: MainAxisAlignment.center,

现在全部的代码如下:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
          appBar: AppBar(
            title: Text('垂直方向布局'),
          ),
          body: Column(
            children: [
              Text('I am Mybj'),
              Text('my website is mybj123.com'),
              Text('I love coding')
            ],
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
          )),
    );
  }
}

主轴对齐

水平方向相对屏幕居中

让文字相对于水平方向居中,我们如何处理?其实只要加入Center组件就可以轻松解决。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
          appBar: AppBar(
            title: Text('垂直方向布局'),
          ),
          body: Column(
            children: [
              Center(child: Text('I am Mybj')),
              Center(child: Text('my website is mybj123.com')),
              Center(child: Text('I love coding'))
            ],
            mainAxisAlignment: MainAxisAlignment.center,
          )),
    );
  }
}

水平方向相对屏幕居中

Expanded属性的使用

其实在学习水平布局的时候我们对Expanded有了深刻的理解,它就是灵活布局。比如我们想让中间区域变大,而头部区域和底部根据文字所占空间进行显示。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
          appBar: AppBar(
            title: Text('垂直方向布局'),
          ),
          body: Column(
            children: [
              Center(child: Text('I am Mybj')),
              Expanded(child: Center(child: Text('my website is mybj123.com'))),
              Center(child: Text('I love coding'))
            ],
            mainAxisAlignment: MainAxisAlignment.center,
          )),
    );
  }
}

Expanded属性的使用

在Flutter里的布局个人觉得是很灵活的,但这就和我们写Html+CSS是一样的,我们需要些练习去熟悉它。动手练习一下吧,理论上我们学会了水平和垂直布局,已经可以布出我们想要的任何界面了。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P14. Flutter 垂直布局Column组件

发表评论

提供最优质的资源集合

立即查看 了解详情