flutter 样式

主题 Theme

使用主题转染一个小部件，将主题应用于子组件

ThemeData data

设置小部件的颜色和排版

ThemeData

定义整体视觉主题的配置

Theme.of

覆盖标准主题设置

当子组件使用Theme.of时，会自动应用Theme的data属性

Theme(
  data:Theme.of(context).copyWith(
    buttonTheme: const ButtonThemeData(
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      minWidth: 60.0
    )
  ),
  child: ...,
)

buttonTheme

按钮主题，配置按钮的颜色和几何形状

minWidth

按钮的最小宽度

padding

内边距

primaryColor

主要颜色

TextSelectionThemeData textSelectionTheme

被选中的文字主题

TextButtonTheme

可以覆盖子组件内的[TextButton]

仅对[TextButton]生效，子组件内的其他小部件不影响。

TextButtonThemeData data

style属性会覆盖文字按钮的样式

TextButtonThemeData(
    style: TextButton.styleFrom(
        primary: Theme.of(context).primaryColor, // 颜色
        minimumSize: Size.infinite,// 最小大小
        shape: RoundedRectangleBorder(), // 形状
    ),
)

IconThemeData

按钮主题

color

颜色

TextStyle

fontSize

设置文字大小，默认为 14 像素

letterSpacing

文本间隔

ButtonStyle

foregroundColor

文字的颜色

foregroundColor: MaterialStateProperty.resolveWith((states) {
  if (states.contains(MaterialState.disabled)) {
    return disabledTextColor ?? Colours.text_disabled;
  }
  return textColor ?? Colors.white;
})

MaterialStateProperty

states

Set集合，按钮中可以查询disable状态。

TextButton(
  onPressed: onPressed,
  child: Text(
    text
  ),
  style: ButtonStyle(foregroundColor: MaterialStateProperty.resolveWith((states) {
    print(states);//{MaterialState.disabled}
    if (states.contains(MaterialState.disabled)) {}//设置按钮禁用时的样式
  })),
)

backgroundColor

背景色，同foregroundColor一样。

overlayColor

水波纹颜色，通常设置为字体颜色的某个透明度

overlayColor: MaterialStateProperty.resolveWith((states) {
  return (textColor ?? Colors.white).withOpacity(0.12);
  // return (backgroundColor ?? Colours.app_main).withOpacity(0.12);
}),

minimumSize

最小尺寸，属性是一个MaterialStateProperty?，需要通过MaterialStateProperty返回一个Size对象

minimumSize: MaterialStateProperty.all<Size>(Size(minWidth, minHeight))

padding

按钮边距，这个属性与最小尺寸冲突，当设置了最小尺寸时，该属性并不会生效

padding: MaterialStateProperty.all<EdgeInsetsGeometry>(padding),

Decoration

装饰框

BoxDecoration

一个不可变的盒子装饰。常用来装饰Container。

有一个边框（border），一个主体（body），和一个投影（shadow）。

盒子的形状可以时矩形或者圆形。

color

背景颜色

border

BoxDecoration(
    border: Border.all(width: 0.6, color: Colors.white),
    borderRadius: BorderRadius.circular(4.0))

borderRadius

圆角

boxShadow

阴影，一个集合，可以设置多个阴影

BoxBorder: border

边框

Gradient? gradient

填充背景使用的渐变，如果设置了此属性，则color无效

InputDecoration

labelText

表单的标题

TextStyle labelStyle

标题样式

EdgeInsetsGeometry? contentPadding

内容边距，包括标题和文字

InputBorder? enabledBorder

边框颜色

enabledBorder: UnderlineInputBorder(
    borderSide: BorderSide(color: _textColor),
),

InputBorder? focusedBorder

获取焦点时的边框颜色

Widget? suffixIcon

输入框右侧图标

contentPadding

内容间距

TextStyle：hintStyle

提示信息样式

hintText

提示信息

border

边框

DecorationImage image

背景图像。

image

图像

fit

填充

fill

通过扭曲源的纵横比来填充目标框。

contain

完全包含在目标框内，尽可能大，其高度或者宽度会有一个与父容器一致，令一个无法填满

cover

将整个目标框完全包裹，图像可能显示不完全

fitWidth

保证宽度与容器一致，不考虑高度

fitHeight

保证高度与容器一致，不考虑宽度

none

与目标框中心对齐，丢弃其余部分，不进行缩放

scaleDown

与目标框中心对齐，可缩小以保证对齐目标框。当形状不一致的时候，高或者宽会有一部分不能填满

Constraints

用于确定元素的大小。

BoxConstraints

由四个数字组成，必须满足如下关系：

 * 0.0 <= [minWidth] <= [maxWidth] <= [double.infinity]
 * 0.0 <= [minHeight] <= [maxHeight] <= [double.infinity]

BoxConstraints.expand()

填充满父元素

BoxConstraints.tight

BoxConstraints.tight(const Size(200, 200)),

指定大小

Scrollbar

一个滚动条，在可滚动列表的外侧添加。

SystemUiOverlayStyle

覆盖系统样式的首选项

动画

AnimatedList

一个可以滚动的容器，在插入或者移出项目的时候，为项目设置动画。

属性值

Color

withOpacity

给定一个小于1的数字，可以设置透明度

Size

尺寸，可通过宽和高实例化

Size(200, 150)

EdgeInsetsGeometry

EdgeInsets的基类，表述边距

EdgeInsets

提供几种实现：

//分别设置四个方向
EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);
//四个方向相同
EdgeInsets.all(double value)
//设置单个方向
EdgeInsets.only({
  this.left = 0.0,
  this.top = 0.0,
  this.right = 0.0,
  this.bottom = 0.0,
});
//设置垂直和水平方向
EdgeInsets.symmetric({
  double vertical = 0.0,
  double horizontal = 0.0,
})

BorderSide

绘制外边框，会压缩内部元素

BorderSide(width: 2.0, color: Colors.lightBlue.shade50)) // 矩形边框，宽度为2 

ShapeBorder

绘制外框的形状

这是一个抽象类，不能直接使用

BoxBorder

一个抽象类

绘制矩形或者圆形边框

Border

绘制四个方向的边框

每个方向都是一个BorderSide

//使用Divider来生成一个分割线
Border(
    bottom: Divider.createBorderSide(context)
)

OutlinedBorder

绘制具有指定宽度和颜色的轮廓

这是一个抽象类，不能直接使用

RoundedRectangleBorder

带圆角的矩形边框

BorderRadius

绘制矩形每个角

BorderRadius.circular(double radius)

InputBorder

抽象类，绘制输入框的边框

InputBorder.none

无边框

BorderRadiusGeometry

圆角，BorderRadius的基类

BoxShadow

盒装阴影

color

颜色

offset

偏移量

Offset

2D便宜，给定横坐标和纵坐标的偏移量

blurRadius

高斯的标准偏差与盒子的形状卷积，数字越大，阴影看起来越模糊

spreadRadius

在应用模糊之前，框应该膨胀的量，可以将阴影变大

Gradient

2D渐变，抽象类

TextSelectionThemeData

TextSelectionThemeData(
    selectionColor: _primaryColor.withAlpha(70),
)

Color? selectionColor

选中的文字颜色

Color? cursorColor

光标颜色