Flutter 水平/垂直方向布局

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlutterDemo'),
        ),
        body: LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly, //均匀分布
      children: <Widget>[
        IconContainer(Icons.home,color:Colors.red),
        IconContainer(Icons.search,color:Colors.orange),
        IconContainer(Icons.settings,color:Colors.blue),
      ],
    );
  }
}

class IconContainer extends StatelessWidget {
  IconData icon;
  double size = 32.0;
  Color color = Colors.red;
  IconContainer(this.icon,{this.color,this.size});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child: Center(
        child: Icon(this.icon,color:Colors.white,size: this.size),
      ),
    );
  }
}

效果展示：

import 'dart:io';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlutterDemo'),
        ),
        body: LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text('按1：2占比分布'),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly, //均匀分布
            children: <Widget>[
              Expanded(
                flex: 1,
                child: IconContainer(Icons.home, color: Colors.red),
              ),
              Expanded(
                flex: 2,
                child: IconContainer(Icons.search, color: Colors.orange),
              ),
            ],
          ),
          Text('左侧固定宽带，右侧自适应'),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly, //均匀分布
            children: <Widget>[
              IconContainer(Icons.home, color: Colors.red),
              Expanded(
                flex: 1,
                child: IconContainer(Icons.search, color: Colors.orange),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget {
  IconData icon;
  double size = 32.0;
  Color color = Colors.red;
  IconContainer(this.icon, {this.color, this.size});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child: Center(
        child: Icon(this.icon, color: Colors.white, size: this.size),
      ),
    );
  }
}

效果展示：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override

  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text('垂直方向布局')),
        body: new Column(
          children: <Widget>[
            Expanded(child: new RaisedButton(
              onPressed: (){},
              color: Colors.blue,
              child: new Text('Blue'),
            )),
            Expanded(child: new RaisedButton(
              onPressed: (){},
              color: Colors.red,
              child: new Text('Red'),
            )),
            Expanded(child: new RaisedButton(
              onPressed: (){},
              color: Colors.orange,
              child: new Text('Orange'),
            )),
          ],
        ),
        
      ),
    );
  }
}