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

╰+攻爆jí腚メ 2023-07-15 11:27 10阅读 0赞

##### 初识flutter结构 #####

> flutter 项目结构

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70]

##### 入口文件 #####

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

##### Widget 基础组件MaterialApp、Scaffold #####

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))),//盒子圆角
          ),
        );
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70]: /images/20230528/2e110d7bdcb94258946c4357d198fe9b.png