Flutter的Padding、Raw、Column、Expanded组件的基本使用

Padding组件：

Padding组件的基本使用代码：

import 'package:flutter/material.dart';
import 'package:flutter_testdemo001/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: Text("flutter demo"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 0,10,0),
        child: GridView.count(
      crossAxisCount: 2,
      childAspectRatio: 1.7,
      children: <Widget>[
        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),
        ),
      ],
    ));
  }
}

Row和Column的使用：

import 'package:flutter/material.dart';
import 'package:flutter_testdemo001/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: Text("flutter demo"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400.0,
      height: 600.0,
      color: Colors.pink,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end, //主轴方向：是Y轴
        crossAxisAlignment: CrossAxisAlignment.center, //X轴：
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主轴方向是X轴
            crossAxisAlignment: CrossAxisAlignment.end,//y轴：
            children: <Widget>[
              IconContainer(Icons.home, color: Colors.blue),
              IconContainer(Icons.home, color: Colors.red),
              IconContainer(Icons.home, color: Colors.green),
            ],
          ),
          Container(
            height: 35.0,
            width: 35.0,
            margin: EdgeInsets.fromLTRB(0, 20, 0, 20),
           
            child:Icon(Icons.close),
            decoration: BoxDecoration(
               color: Colors.white,
              borderRadius: BorderRadius.all(
                Radius.circular(100)
              )
            ),
          )
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget {
  double size = 32.0;
  Color color = Colors.red;
  IconData icon;

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

 Expanded的使用：

import 'package:flutter/material.dart';
import 'package:flutter_testdemo001/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: Text("flutter demo"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: IconContainer(Icons.home,color:Colors.red),
        ),
        IconContainer(Icons.home,color:Colors.green),
      ],
    );

  }
}

class IconContainer extends StatelessWidget {
  double size = 32.0;
  Color color = Colors.red;
  IconData icon;

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

实例效果：

import 'package:flutter/material.dart';
import 'package:flutter_testdemo001/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: Text("flutter demo"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

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