Flutter 组件之Widget、Center、Text、MaterialApp、Scaffold 常用属性总结-蒲公英云

Flutter 组件之Widget、Center、Text、MaterialApp、Scaffold 常用属性总结

初识flutter结构

flutter 项目结构

在这里插入图片描述

入口文件

//flutter 基础包导入
import 'package:flutter/material.dart';
//这里HomePage() 需要实例化使用,这里可以省略new （new HomePage()）
void main() { 
  runApp(HomePage());
}

import 'package:flutter/material.dart';
class HomePage extends StatelessWidget { 
  @override
  Widget build(BuildContext context) { 
    // TODO: implement build
    return MaterialApp(//顶层Widget类似于html标签
      home: Scaffold(//布局结构的基本结构包含appBar、body、drawer（抽屉菜单） ...
        appBar: AppBar(//导航结构
          title: Text("我是头部的内容"),
        ),
        body: PageComponets(),//内容主结构组件
      ),
    );
  }
}

Text、Container组件常用属性

import 'package:flutter/material.dart';
class PageComponets extends StatelessWidget { 
  @override
  Widget build(BuildContext context) { 
    // TODO: implement build
    return Center(//居中显示
      child: Container(//类似于div
        child: Text(//文字组件
          "测试",
          textAlign: TextAlign.justify,//文本对齐方式
          textDirection: TextDirection.ltr,//文本显示方式left to right
          textScaleFactor: 1.0,//文字显示倍率放大缩小
          overflow: TextOverflow.ellipsis,//css同样overflow超过部分处理方式
          maxLines: 1,//字体最大显示行数,
          style: TextStyle(//文字样式
            fontSize: 20.0,//字体大小
            color: Colors.blueGrey,//字体颜色
            fontWeight: FontWeight.bold,//字重
            decoration: TextDecoration.lineThrough,//删除线 文字装饰线
            decorationStyle: TextDecorationStyle.dashed,//虚线
            decorationColor: Color.fromARGB(1, 111, 222, 122),//文字装饰线颜色同css
            letterSpacing: 20.2,//字母间隙,同css
            fontStyle:FontStyle.normal,//字体 italic斜体正常体
          ),
        ),
        width: 500.0,//盒子的宽
        height: 400.0,//盒子的高
        padding: EdgeInsets.fromLTRB(0, 20, 30, 20),//内边距左上右下
        margin: EdgeInsets.all(20),//外边距全部
        transform: Matrix4.translationValues(0, -200, 30),//同css 倾斜位移旋转
        alignment: Alignment.topCenter,//文字居于盒子上 中 部位
        decoration: BoxDecoration(//盒子属性
            color: Colors.orange,//背景颜色
            border: Border.all(//边框颜色宽度
              color: Colors.pink,
              width: 3.4,
            ),
            borderRadius: BorderRadius.all(Radius.circular(11))),//盒子圆角
      ),
    );
  }
}