Flutter组件（Padding，Row，Column，Expanded）

Padding组件

Flutter 中很多 Widget 是没有 padding 属性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。

属性	说明
padding	padding 值, EdgeInsetss 设置填充的值
child	子组件

在下面示例中，在网格布局排布图片的同时，每张图片之间或与边缘之间都设置了一个边距，因此我们在每一个Image外面又嵌套类一个Padding组件，设置图片上左都留一个空白，然后我们在grideview外面又嵌套一个padding，让这个整体右侧再留出一定空白

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

import 'package:flutter/material.dart';
import 'res/listData.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding:EdgeInsets.fromLTRB(0, 0, 10, 0),
      child: GridView.count(
      childAspectRatio: 1.5,
      crossAxisCount:2,
      children: [
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.network("https://www.itying.com/images/flutter/1.png",fit: BoxFit.cover,),
          ),
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover,),
          ),
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.network("https://www.itying.com/images/flutter/3.png",fit: BoxFit.cover,),
          ),
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.network("https://www.itying.com/images/flutter/4.png",fit: BoxFit.cover,),
          ),
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.network("https://www.itying.com/images/flutter/5.png",fit: BoxFit.cover,),
          ),
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.network("https://www.itying.com/images/flutter/6.png",fit: BoxFit.cover,),
          ),
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.network("https://www.itying.com/images/flutter/1.png",fit: BoxFit.cover,),
          ),
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover,),
          ),
      ], 
    ),      
    );
  }
}

Row和Column组件

Row和Column是flutter中最基础的容器组件，Row用来水平放置子组件，Column用来垂直放置子组件。它们都可以设置子组件的对齐方式。

Row默认行为：在水平方向会尽可能大，大到会撑满parent；在垂直方向会尽可能小，小到能包裹住children。children在水平居左，垂直方向上居中。

Column默认行为：在垂直方向上会尽可能大，大到会撑满parent；在水平方向会尽可能小，小到能包裹住children。children在垂直居上，水平方向上居中。

Row(水平展示)

{
    Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    List<Widget> children = const <Widget>[],
  }

属性	说明
mainAxisAlignment	主轴(水平方向)的排序方式(取值可以点进源码中查看，不同取值对应着内部子组件的排布)
crossAxisAlignment	次轴(垂直方向)的排序方式
children	组件子元素

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      width: 400,
      color: Colors.pink,
      child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        IconContainer(Icons.search,color: Colors.blue,),
        IconContainer(Icons.search,color: Colors.green,),
        IconContainer(Icons.search,color: Colors.red,),
      ],
    ),
    );
  }
}
class IconContainer extends StatelessWidget{
  //定义属性的时候在类型后面加一个？ 表示把当前属性定义成可空类型属性  
  Color? color=Colors.red;
  double? size=32.0;
  IconData icon;
  IconContainer(this.icon,{Key? key, this.color,this.size}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: color,
      child: Center(
        child: Icon(icon,size: size,color: Colors.white)
      ),
    );
  }
}

Column(垂直展示)

和Row一样的用法，只是Row中的主轴为Column中的次轴

属性	说明
crossAxisAlignment	主轴(垂直方向)的排序方式
mainAxisAlignment	次轴(水平方向)的排序方式
children	组件子元素

把Row中示例的Row改为Column就可以看到效果

Expanded

Expanded 使用 来平分布局占用比例（相当于Android里面的LinearLayout 控件中设置权重）

属性	说明
flex	元素站整个父 Row /Column 的比例
child	子元素

在多个组件外部嵌套Expanded，用flex设置权值

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          flex: 1,
          child: IconContainer(Icons.search,color: Colors.blue,),
        ),
        Expanded(
          flex: 2,
          child: IconContainer(Icons.search,color: Colors.green,),
        ),
        Expanded(
          flex: 1,
          child: IconContainer(Icons.search,color: Colors.red,),
        ),
        
        
      ],
    );
  }
}
class IconContainer extends StatelessWidget{
  //定义属性的时候在类型后面加一个？ 表示把当前属性定义成可空类型属性  
  Color? color=Colors.red;
  double? size=32.0;
  IconData icon;
  IconContainer(this.icon,{Key? key, this.color,this.size}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: color,
      child: Center(
        child: Icon(icon,size: size,color: Colors.white)
      ),
    );
  }
}

示例演示

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 200,
          color: Colors.black,
        ),
        SizedBox(height: 10),
        Row(
          children: [
            Expanded(
              flex: 2,
              child: SizedBox(
                height: 180,
                child: Image.network("https://www.itying.com/images/flutter/1.png",fit: BoxFit.cover,),
              )
            ),
            SizedBox(width:10),
            Expanded(
              flex: 1,
              child: SizedBox(
                height: 180,
                child: ListView(
                  children: [
                    Container(
                      height: 85,
                      child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover,),
                    ),
                    SizedBox(height: 10),
                    Container(
                      height: 85,
                      child: Image.network("https://www.itying.com/images/flutter/3.png",fit: BoxFit.cover,),
                    )
                  ],
                ),
              )
            )
          ],
        )
      ],
    );
  }
}