Flutter（六）：Paddiing Row Column E

1 Padding 组件

Padding 组件关键两个属性：padding 和 child，表示 child 组件与外面的 padding 距离。

下面的例子只是为了演示 Padding 组件：

import 'package:flutter/material.dart';

import 'res/listData.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  Widget _getList(context, index) {
    return Padding(
      padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
      child: Container(
        color: Colors.orange,
        child: Column(
          children: <Widget>[
            Image.network(listData[index]['imageUrl']),
            SizedBox(height: 12),
            Text(listData[index]['title'])
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Padding(
        padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
        child: Container(
          // padding: EdgeInsets.all(10),
          child: GridView.builder(
            // crossAxisCount: 2,
            // crossAxisSpacing: 10,
            // mainAxisSpacing: 10,
            // childAspectRatio: 1.0,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              // crossAxisSpacing: 10,
              // mainAxisSpacing: 10,
            ),
            itemCount: listData.length,
            itemBuilder: this._getList,
          ),
        ));
  }
}

效果

2 Row

import 'package:flutter/material.dart';

import 'res/listData.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      color: Colors.pink,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          IconContext(Icons.home, color: Colors.red, size: 40.0),
          IconContext(Icons.settings, color: Colors.indigoAccent),
          IconContext(Icons.search)
        ],
      ),
    );
  }
}

class IconContext extends StatelessWidget {
  final IconData icon;
  final Color color;
  final double size;

  IconContext(this.icon, {this.color, this.size});

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

效果

3 Column

import 'package:flutter/material.dart';

import 'res/listData.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 500,
      width: 400,
      color: Colors.pink,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          IconContext(Icons.home, color: Colors.red, size: 40.0),
          IconContext(Icons.settings, color: Colors.indigoAccent),
          IconContext(Icons.search)
        ],
      ),
    );
  }
}

class IconContext extends StatelessWidget {
  final IconData icon;
  final Color color;
  final double size;

  IconContext(this.icon, {this.color, this.size});

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

效果图

4 Expanded

import 'package:flutter/material.dart';

import 'res/listData.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 500,
      width: 400,
      color: Colors.pink,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[ // 所有的元素都指定 flex，则下面组件宽高无效
          Expanded(
            flex: 1,
            child: IconContext(Icons.home, color: Colors.red, size: 40.0),
          ),
          Expanded(
            flex: 2,
            child: IconContext(Icons.settings, color: Colors.indigoAccent),
          ),
          Expanded(
            flex: 1,
            child: IconContext(Icons.search),
          ),
        ],
      ),
    );
  }
}

class IconContext extends StatelessWidget {
  final IconData icon;
  final Color color;
  final double size;

  IconContext(this.icon, {this.color, this.size});

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

效果

指定宽度：

import 'package:flutter/material.dart';

import 'res/listData.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 500,
      width: 400,
      color: Colors.pink,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          IconContext(Icons.home, color: Colors.red, size: 40.0), // 组件指定的宽度 100
          Expanded(
            flex: 1,
            child: IconContext(Icons.settings, color: Colors.indigoAccent),
          ),
        ],
      ),
    );
  }
}

class IconContext extends StatelessWidget {
  final IconData icon;
  final Color color;
  final double size;

  IconContext(this.icon, {this.color, this.size});

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

效果

5 综合实例

import 'package:flutter/material.dart';

import 'res/listData.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 500,
      width: 400,
      color: Colors.pink,
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Container(
                  height: 200,
                  color: Colors.blue,
                  child: Text('11'),
                ),
              )
            ],
          ),
          SizedBox(height: 10),
          Row(
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  height: 200,
                  color: Colors.green,
                  child: Text('222'),
                ),
              ),
              SizedBox(width: 10),
              Expanded(
                flex: 1,
                child: Column(children: <Widget>[
                  Row(children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: 95,
                        color: Colors.orange,
                        child: Text('333'),
                      ),
                    ),
                  ]),
                  SizedBox(height: 10),
                  Row(children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: 95,
                        color: Colors.orange,
                        child: Text('444'),
                      ),
                    ),
                  ]),
                ]),
              ),
            ],
          )
        ],
      ),
    );
  }
}

class IconContext extends StatelessWidget {
  final IconData icon;
  final Color color;
  final double size;

  IconContext(this.icon, {this.color, this.size});

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

效果