flutter——column组件 垂直布局

项目column0222

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar:AppBar(),
        body:Mycolumn(),
      ),
    );
  }
}

//自定义垂直布局
class Mycolumn extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("第一行"),
        Text("第二行第十四师"),
        Text("第三行阿哈哈哈哈哈哈"),
      ],
      //设置样式
      //设置横轴定位
      crossAxisAlignment: CrossAxisAlignment.start,
      //设置主轴定位,也就是纵轴
      mainAxisAlignment: MainAxisAlignment.center,
    );
  }
}




/**
 * Column() 竖向布局的组件
 * 
 * 横轴和纵轴的定位,样式
 * //设置横轴定位
      crossAxisAlignment: CrossAxisAlignment.start,
      //设置主轴定位,也就是纵轴
      mainAxisAlignment: MainAxisAlignment.center,
 */

 

你可能感兴趣的:(flutter)