Row，Column和Expanded

Row

Row常用于水平布局

参数列表

children：设置子组件；
mainAxisAlignment：主轴的排序方式；
crossAxisAlignment： 除了主轴外的另一条轴的排序方式（相对于父组件而言）

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "test",
      home: Scaffold(
        appBar: AppBar(title: Text("导航栏")),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(child: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
      IconList(Icons.search, 25, Colors.yellow),
      IconList(Icons.home, 25, Colors.white),
      IconList(Icons.select_all, 25, Colors.red)
    ]));
  }
}

class IconList extends StatelessWidget {
  double size = 25;
  IconData iconName;
  Color color = Colors.white;
  IconList(this.iconName, this.size, this.color);
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 80,
      height: 80,
      color: Colors.blue[200],
      child: Center(child: Icon(iconName, size: size, color: color)),
    );
  }
}

image.png

Column

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "test",
      home: Scaffold(
        appBar: AppBar(title: Text("导航栏")),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      color: Colors.pink,
      child: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
      IconList(Icons.search, 25, Colors.yellow),
      IconList(Icons.home, 25, Colors.white),
      IconList(Icons.select_all, 25, Colors.red)
    ]));
  }
}

class IconList extends StatelessWidget {
  double size = 25;
  IconData iconName;
  Color color = Colors.white;
  IconList(this.iconName, this.size, this.color);
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 80,
      height: 80,
      color: Colors.blue[200],
      child: Center(child: Icon(iconName, size: size, color: color)),
    );
  }
}

image.png

Expanded可以进行空间的分配操作，规定元素占几分，一般与Row，Column结合使用

使用了Expanded与没使用Expanded一起用，会先将空间分配给没有使用Expanded的元素，再将剩余的空间进行flex值分配。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "test",
      home: Scaffold(
        appBar: AppBar(title: Text("导航栏")),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Expanded(child: IconList(Icons.search, 25, Colors.yellow, Colors.red), flex: 1),
        IconList(Icons.home, 25, Colors.white, Colors.yellow),
        IconList(Icons.select_all, 25, Colors.red, Colors.white)
    ]));
  }
}

class IconList extends StatelessWidget {
  double size = 25;
  IconData iconName;
  Color color = Colors.white;
  Color bgkColor = Colors.black;

  IconList(this.iconName, this.size, this.color, this.bgkColor);
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 80,
      height: 80,
      color: bgkColor,
      child: Center(child: Icon(iconName, size: size, color: color)),
    );
  }
}

image.png

综合练习：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "demo",
      home: Scaffold(
        appBar: AppBar(title: Text("我的导航栏")),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Container(
        margin: EdgeInsets.all(10),
        color: Colors.black,
        height: 200,
      ),
      Container(
        height: 200,
        constraints: BoxConstraints(maxHeight: 200),
        child: Row(children: [
          SizedBox(width: 10),
          Expanded(
              flex: 2,
              child: Container(
                  height: 200,
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.black, width: 1)),
                  child: Image.network(
                      "http://pic.51yuansu.com/pic3/cover/03/98/40/5e8465cf42875_610.jpg"))),
          SizedBox(width: 10),
          Expanded(
              flex: 1,
              child: Container(
                child: Column(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.black, width: 1)),
                      // margin: EdgeInsets.fromLTRB(0, 0, 0, 10),
                      height: 95,
                      child: Image.network(
                          "http://pic.51yuansu.com/backgd/cover/00/23/34/5ba22a6822c1b.jpg!/fw/780/quality/90/unsharp/true/compress/true",
                          fit: BoxFit.cover),
                    ),
                    SizedBox(height: 10),
                    Container(
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.black, width: 1)),
                      height: 95,
                      child: Image.network(
                          "http://pic.51yuansu.com/backgd/cover/00/23/34/5ba22a6822c1b.jpg!/fw/780/quality/90/unsharp/true/compress/true",
                          fit: BoxFit.cover),
                    ),
                    
                  ],
                ),
              )),
              SizedBox(width: 10)
        ]),
      )
    ]);
  }
}

image.png