flutter 结构和样式归纳

原创

已于 2025-02-18 12:26:11 修改 · 2.1k 阅读

标签

#flutter #javascript #前端

于 2025-02-18 12:22:00 首次发布

MaterialApp

MaterialApp表示一个应用程序总体：

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    )
  }

脚手架基本结构

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(
              'home page',
            ),
          ],
        ),
      ),
    );

边框（Border）

单侧边框

border: Border(
                top: BorderSide( // 设置单侧边框的样式
                  color: Colors.indigoAccent[100],
                  width: 3,
                  style: BorderStyle.solid
                )
              )

全部边框

border: Border.all(
  color: Colors.indigoAccent[100],
  width: 3,
  style: BorderStyle.solid
)

圆角边框

decoration: BoxDecoration(
  color: Color.fromRGBO(3, 54, 255, 1),
  border: Border.all(
    color: Colors.indigoAccent[100],
    width: 3,
    style: BorderStyle.solid
  ),
  borderRadius: BorderRadius.circular(16), // 设置四周圆角 
),

//单侧圆角
borderRadius: BorderRadius.only(
  topLeft: Radius.circular(64)
),

阴影（BoxShadow）

boxShadow: [
  BoxShadow(
    offset: Offset(6, 7), // 阴影的偏移量
    color: Color.fromRGBO(16, 20, 188, 1), // 阴影的颜色
    blurRadius: 5, // 阴影的模糊程度
    spreadRadius: 0, // 扩散的程度，如果设置成正数，则会扩大阴影面积；负数的话，则会缩小阴影面积
  )
],

渐变（gradient）

gradient: RadialGradient( // 圆形渐变，从中心开始渐变
  colors: [
    Color.fromRGBO(7, 102, 255, 1),
    Color.fromRGBO(3, 28, 128, 1)
  ]
),

gradient: LinearGradient( // 线性渐变，如果没有指定开始和结束的地方，则默认从左边到右边
  colors: [
    Color.fromRGBO(7, 102, 255, 1),
    Color.fromRGBO(3, 28, 128, 1)
  ],
  begin: Alignment.topCenter, // 开始
  end: Alignment.bottomCenter, // 结束
),

shape属性

border：BorderDirectional --通过【top】【bottom】【start】【end】

shape: BorderDirectional(
    top: BorderSide(color: Colors.white),
    start: BorderSide(color: Colors.black,width: 15)
),

shape: Border(
    top: BorderSide(width: 5.0, color: Colors.grey),
    left: BorderSide(width: 5.0, color: Colors.grey),
),

RoundedRectangleBorder --圆角类矩形边框
ContinuousRectangleBorder --圆角类矩形边框
StadiumBorder --圆角矩形，不需要设置borderRadius
CircleBorder --裁剪为圆形
BeveledRectangleBorder --扁平或“斜角”角的矩形边框
InputBorder --输入框边框

shape: RoundedRectangleBorder(
    side: BorderSide(width: 1.0, color: Colors.black),
    borderRadius: BorderRadius.all(Radius.circular(15))
),
shape: ContinuousRectangleBorder(
    side: BorderSide.none,
    borderRadius: BorderRadius.circular(40.0),
),
shape: StadiumBorder(
    side: BorderSide(width: 2.0, color: Colors.grey)
),

shape: CircleBorder(
    side: BorderSide(width: 2.0, color: Colors.grey),
),
shape: BoxShape.circle, // 将其形状设置为圆形，但此形状不能设置圆角属性

shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(20.0),
    side: BorderSide(width: 2.0, color: Colors.grey)
),
//输入框边框两种
shape: OutlineInputBorder(
    borderSide: BorderSide(width: 2.0, color: Colors.purple),
    borderRadius: BorderRadius.circular(20.0),
),
shape: UnderlineInputBorder(
    borderSide: BorderSide(width: 5.0, color: Colors.blue),
    borderRadius: BorderRadius.circular(20),
),

按钮

ElevatedButton 即"漂浮"按钮，它默认带有阴影和灰色背景。按下后，阴影会变大
TextButton即文本按钮，
OutlinedButton默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)
IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景

TextButton.icon(

  icon: Icon(Icons.info),

  label: Text("详情"),

  onPressed: _onPressed,

),

以上按钮都可以带图标

ButtonStyle属性

MaterialStateProperty.resolveWith() 可拦截分别设置不同状态下的样式
MaterialStateProperty.all() 设置点击事件所有状态下的样式

TextButton(
    style: ButtonStyle(
        backgroundColor: MaterialStateProperty.resolveWith((state) {
            if (state.contains(MaterialState.pressed)) {
                 //设置按下时背景颜色
                 return Colors.green[200];
            }
            return Colors.green;
        }),
        shape: MaterialStateProperty.all(const StadiumBorder()),
    ),
    onPressed: () {},
    child: Text("上传",style: TextStyle(color: Colors.white),)),

text文本

Text("Hello world! I'm Jack. "*4,
	textAlign: TextAlign.left,
 	textScaleFactor: 1.5,
  	maxLines: 1,
  	overflow: TextOverflow.ellipsis,
	style: TextStyle(
      color: Colors.blue,
      fontSize: 18.0,
      height: 1.2, //行高 ，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height
      fontFamily: "Courier",
      background: Paint()..color=Colors.yellow,
      decoration:TextDecoration.underline,//none无文字装饰   lineThrough删除线   overline文字上面显示线    underline文字下面显示线
      decorationColor: const Color(0xffffffff),//线的颜色
      decorationStyle: TextDecorationStyle.dashed//文字的修饰方式dashed,dotted虚线(简短间隔大小区分)  double三条线  solid两条线
      wordSpacing: 0.0,//单词间隙(负值可以让单词更紧凑)
      letterSpacing: 0.0,//字母间隙(负值可以让字母更紧凑)
      fontStyle: FontStyle.italic,//文字样式，斜体和正常
      fontWeight: FontWeight.w900,//字体粗细  粗体和正常
  ),

);

fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。
textScaleFactor主要是用于系统字体大小设置改变时对 Flutter 应用字体进行全局调整，而fontSize通常用于单个文本，字体大小不会跟随系统字体大小变化。

TextRich 可以显示多种样式

Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "Home: "
     ),
     TextSpan(
       text: "https://flutterchina.club/",
       style: TextStyle(
         color: Colors.blue
       ),  
       recognizer: _tapRecognizer
     ),
    ]
))

// 声明文本样式
const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);

// 使用文本样式
var buttonText = const Text(
  "Use the font for this text",
  style: textStyle,
);

字体图标

https://material.io/tools/icons/官网

pubspec.yaml文件中的配置

flutter:

  uses-material-design: true

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.accessible,color: Colors.green),
    Icon(Icons.error,color: Colors.green),
    Icon(Icons.fingerprint,color: Colors.green),
  ],

图片

在pubspec.yaml中的flutter部分添加

assets:

- images/avatar.png

使用：

Image(

  image: AssetImage("images/avatar.png"),

  width: 100.0

);

Image.asset("images/avatar.png",
  width: 100.0,
)//快捷的构造函数Image.asset用于从asset中加载、显示图片


加载网络图片
Image(
  image: NetworkImage(
      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
  width: 100.0,
)

快捷构造函数
Image.network(
  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
  width: 100.0,
)

参数

const Image({

...

this.width, //图片的宽

this.height, //图片高度

this.color, //图片的混合色值

this.colorBlendMode, //混合模式

this.fit,//缩放模式

this.alignment = Alignment.center, //对齐方式

this.repeat = ImageRepeat.noRepeat, //重复方式

...