Flutter-9-垂直布局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:new AppBar(
        title:new Text('垂直方向布局'),
      ),
      body:Column(
        children: [
         Text('213123'),
         Text('my213123123'),
         Text('I love21312312')
        ],
      )
    ),
  );

}
}

  • CrossAxisAlignment.star:居左对齐。
  • CrossAxisAlignment.end:居右对齐。
  • CrossAxisAlignment.center:居中对齐。

主轴和副轴的辨识:

main轴:如果你用column组件,那垂直就是主轴,如果你用Row组件,那水平就是主轴。
cross轴:cross轴我们称为幅轴,是和主轴垂直的方向。比如Row组件,那垂直就是幅轴,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:new AppBar(
        title:new Text('垂直方向布局'),
      ),
      body:Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
         Center(child:Text('I amqwe')),
         Center(child:Text('my isqweq')),
         Center(child:Text('I eqwew'))
        ],
      )
    ),
  );

}
}

Expanded属性的使用:
同水平布局。

你可能感兴趣的:(Flutter-9-垂直布局Column)