本篇博客大致介绍了通过 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( width: 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( width: 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( width: 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 ) ] ), );
原文：https://www.cnblogs.com/GetcharZp/p/12205890.html