Flutter 基本布局

本篇博客大致介绍了通过 Flutter 实现一些简单的页面布局，官方的参考文档： https://flutter.cn/docs/get-started/flutter-for/web-devs

首先，项目的入口如下，后面的所有操作都是对 container 变量进行更改

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 基本布局'),
        ),
        body: container,
      ),
    );
  }
}

1、使用 Flutter 创建一个 300x300 的块，用绿色将其填充

var container = Container(
   300,
  height: 300,
  decoration: BoxDecoration(
    color: Colors.green,
  ),
);

2、字体样式的设置，以及内边距、外边距的设置，背景颜色的设置，在 TextStyle() 中，通过 letterSpace 设置每个字符之间的间隙、wordSpace 设置每个单词之间的间隙。

var container = Container(
  child: Text(
    'Hello World',
    style: TextStyle(
      fontSize: 30,
      color: Colors.pink,
      fontWeight: FontWeight.w900
    ),
  ),
  padding: EdgeInsets.all(20), // Padding 设置
  margin: EdgeInsets.all(20), // Margin 设置
　decoration: BoxDecoration(  // 背景颜色的设置
   color: Colors.red
  ),
);

3、将字体用 Center 括起来可以实现字体居中

var container = Container(
  child: Center(
    child: Text(
      'Hello World',
    ),
  ),
);

4、通过 EdgeInsets.only() 设置指定方向的边距，通过 BorderRadius 设置圆角

var container = Container(
   300,
  height: 100,
  margin: EdgeInsets.only( // 设置指定方向的外边距
      top: 10.0,
      left: 10.0
  ),
  decoration: BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.all(
        const Radius.circular(8.0),
      )
  ),
);

5、通过 BoxShadow() 设置盒子的阴影

var container = Container(
   300,
  height: 100,
  margin: EdgeInsets.only(
      top: 10,
      left: 10
  ),
  decoration: BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.all(
        const Radius.circular(8.0),
      ),
      boxShadow: [
        BoxShadow(
            color: Colors.black,
            offset: Offset(0, 0),
            blurRadius: 10
        )
      ]
  ),
);