没有合适的资源?快使用搜索试试~ 我知道了~
本篇博客大致介绍了通过 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. @
资源推荐
资源详情
资源评论
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 创建一个 300×300 的块,用绿色将其填充
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(
资源评论
weixin_38526650
- 粉丝: 1
- 资源: 885
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功