Padding: 内边距Widget,与CSS中的padding相似. import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('代码测试'), centerTitle: true, ), body: Padd…

1.布局和容器 [布局]是把[容器]按照不同的方式排列起来. Scaffold包含的主要部门:appBar,body,bottomNavigator 其中body可以是一个布局组件,也可以是一个容器组件 2.Layout 布局…

DecoratedBox: 装饰容器,在其子widget绘制前(或后)绘制一个装饰Decoration(如背景.边框.渐变等) import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('代码测试'), cent…

Container 类似于HTML中的div标签 import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('代码测试'), centerTitle: true, ), body: Container( alig…

AnimatedPadding : 会产生动画效果的padding,在给定时间内缩放到指定padding import 'package:flutter/material.dart'; class AuthList extends StatefulWidget { @override _AuthListState createState() => _AuthListState(); } class _AuthListState extends State<AuthList> { // 方…

Center容器用来居中widget import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('代码测试'), centerTitle: true, ), body: Center( // widthFacto…

Flutter 有着丰富的布局控件库 . Flutter 中的布局整体分为 Single-child layout widget (单子布局部件) Multi-child layout widget (多子布局部件) 本篇我们将开始学习单子布局部件 . 类似于 Android 学习中有五大布局, 可是到实际开发中 , 用到的最多的只有线性布局.相对布局.帧布局. Flutter 布局单子部件官网学习文档列就有 18 种 , 在实际开发中未必能全用到 . 为了节省学习成本 , 各位童鞋可先重点掌握…

1.Stack: 取代线性布局 (译者语:和Android中的LinearLayout相似),Stack允许子 widget 堆叠, 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置.Stacks是基于Web开发中的绝度定位(absolute positioning )布局模型设计的.使用Stack可以使用alignment属性alignment: const Alignment(0.5, 0.0) 这是自由定义偏移的位置,横向纵向都是从-1.0–1.0当然也可…

SizedOverflowBox: 子组件在超出SizedOverflowBox指定的宽高时,不会隐藏,依然进行绘制 OverflowBox: 限制子组件的宽高. import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title:…

FractionallySizedBox 用法与SizedBox类似,只不过FractionallySizedBox的宽高是百分比大小,widthFactor,heightFactor参数就是相对于父控件的比例.注意设置FractionallySizedBox宽高后,其子组件设置的宽高将不起作用 import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { @override Widget bui…