Flutter学习笔记04--布局管理

Row布局

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context){

    return MaterialApp(
      title: 'Row Widget Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('水平方向布局'),
        ),
        body: new Row(
          children: <Widget>[
            Expanded(
              child: new RaisedButton(
                onPressed: (){}, 
                color: Colors.redAccent,
                child: new Text('Red Button'),
              ),
            ), 
            Expanded(
              child: new RaisedButton(
                onPressed: (){}, 
                color: Colors.orangeAccent,
                child: new Text('Orange Button'),
              ), 
            ), 
            Expanded(
              child: new RaisedButton(
                onPressed: (){}, 
                color: Colors.lightBlue,
                child: new Text('Blue Button'),
              ), 
            ), 
              
          ],
        ),
      )
    );
  }  
}

Column布局

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context){

    return MaterialApp(
      title: 'Column Widget Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('垂直方向布局'),
        ),
        body: new Column(
          children: <Widget>[
            Text('I am zhouyuming'),   
            Text('I am zhouyuming'),
            Text('I am zhouyuming'),
            Text('I am zhouyuming'),
          ],
        ),
      )
    );
  }  
}