flutter 动手篇1 - 线性布局 Column & Row

线性布局 Column & Row

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Column & Row',
      theme: new ThemeData(
        primarySwatch: Colors.lightBlue,
      ),
      home: new MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Column & Row", style: TextStyle(color: Colors.white))
      ),
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,//主轴方向居中显示
              children: [
                Text(' Hello World! '),
                Text(' I am Charming '),
              ],
            ),
            Row(
              mainAxisSize: MainAxisSize.min, //相当于css中的display: inline-block;max相当于display:block;
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(' Hello World! '),
                Text(' I am Charming '),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              textDirection: TextDirection.rtl,
              children: [
                Text(' Hello World! '),
                Text(' I am Charming '),
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              verticalDirection: VerticalDirection.up,//垂直方向从上往下显示
              children: [
                Text(' Hello World! ', style: TextStyle(fontSize: 20.0)),
                Text(' I am Charming '),
              ],
            )
          ],
        ),
      ),
    );
  }
}

效果展示 //

image.png