flutter-布局（水平和垂直）

水平方向灵活和不灵活布局

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:"layout",
      home:Scaffold(
        appBar: AppBar(
          title:Text('水平方向布局')
        ),
        body: Row(
          children: <Widget>[
            //加上EXPANDED就是灵活的横线布局
            RaisedButton(
              onPressed: (){},
              color: Colors.deepOrange,
              child: Text('红色按钮'),
            ),
            Expanded(child:RaisedButton(
              onPressed: (){},
              color: Colors.orangeAccent,
              child: Text('黄色按钮'),
            )),
            RaisedButton(
              onPressed: (){},
              color: Colors.lightBlue,
              child: Text('蓝色按钮'),
            ),
          ],
        ),
      ),
    );
  }
}

效果

 

 

 

 

垂直方向布局

 

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:"layout",
      home:Scaffold(
        appBar: AppBar(
          title:Text('垂直方向布局')
        ),
        body: Center(child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          //主轴方向对齐
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text('I am YYY'),
            Expanded(
              child: Text('I am YYY32132121'),
            ),
            Text('I am YYY'),
          ],
        ),)
      ),
    );
  }
}