build method
Describes the part of the user interface represented by this widget.
The framework calls this method when this widget is inserted into the tree in a given BuildContext and when the dependencies of this widget change (e.g., an InheritedWidget referenced by this widget changes). This method can potentially be called in every frame and should not have any side effects beyond building a widget.
The framework replaces the subtree below this widget with the widget returned by this method, either by updating the existing subtree or by removing the subtree and inflating a new subtree, depending on whether the widget returned by this method can update the root of the existing subtree, as determined by calling Widget.canUpdate.
Typically implementations return a newly created constellation of widgets that are configured with information from this widget's constructor and from the given BuildContext.
The given BuildContext contains information about the location in the tree at which this widget is being built. For example, the context provides the set of inherited widgets for this location in the tree. A given widget might be built with multiple different BuildContext arguments over time if the widget is moved around the tree or if the widget is inserted into the tree in multiple places at once.
The implementation of this method must only depend on:
- the fields of the widget, which themselves must not change over time, and
- any ambient state obtained from the
contextusing BuildContext.dependOnInheritedWidgetOfExactType.
If a widget's build method is to depend on anything else, use a StatefulWidget instead.
See also:
- StatelessWidget, which contains the discussion on performance considerations.
Implementation
@override
Widget build(BuildContext context) {
Color _currentTextColor;
Color _currentBackgroundColor;
Color? _currentBackgroundHighlightColor;
Color _currentBorderColor;
double _currentBorderWidth;
double _cornerRadius = this.cornerRadius;
double _highlightOpacity = 1.0; // 默认为1.0,即没直接设置高亮颜色的时候，高亮为原色
if (this.highlightOpacity != null) {
_highlightOpacity = this.highlightOpacity!;
}
if (selected == true) {
if (enable == true) {
_currentTextColor = selectedTextColor!;
_currentBackgroundColor = selectedBGColor!;
_currentBorderColor = selectedBorderColor ?? Colors.transparent;
_currentBackgroundHighlightColor = selectedBackgroundHighlightColor;
} else {
_currentTextColor = selectedTextColor!.withOpacity(disableOpacity);
_currentBackgroundColor = selectedBGColor!.withOpacity(disableOpacity);
_currentBorderColor = selectedBorderColor != null
? selectedBorderColor!.withOpacity(disableOpacity)
: Colors.transparent;
}
_currentBorderWidth = selectedBorderWidth;
} else {
if (enable == true) {
_currentTextColor = normalTextColor;
_currentBackgroundColor = normalBGColor;
_currentBorderColor = normalBorderColor ?? Colors.transparent;
_currentBackgroundHighlightColor = normalBackgroundHighlightColor;
} else {
_currentTextColor = normalTextColor.withOpacity(disableOpacity);
_currentBackgroundColor = normalBGColor.withOpacity(disableOpacity);
_currentBorderColor = normalBorderColor != null
? normalBorderColor!.withOpacity(disableOpacity)
: Colors.transparent;
}
_currentBorderWidth = normalBorderWidth;
}
/*
BorderSide borderSide = BorderSide(
width: _currentBorderWidth,
color: _currentBorderWidth == 0
? Colors.transparent
: _currentBorderColor, // bugfix:等于0的时候，要设置透明色，否则会有描边
);
OutlinedBorder shapeBorder = RoundedRectangleBorder(
borderRadius: BorderRadius.circular(_cornerRadius),
side: borderSide,
);
OutlinedBorder shapeBorder2 = StadiumBorder();
*/
//* // 使用新版 TextButton
//[Flutter TextButton 详细使用配置、Flutter ButtonStyle概述实践](https://zhuanlan.zhihu.com/p/278330232)
// 检查 高亮颜色 的值(使用 FlatButton 的时候,空值会自动补上高亮效果)
if (_currentBackgroundHighlightColor == null) {
if (_currentBackgroundColor == Colors.transparent) {
//bugfix:修复透明时候的取值
_currentBackgroundHighlightColor = _currentBackgroundColor;
} else {
_currentBackgroundHighlightColor =
_currentBackgroundColor.withOpacity(_highlightOpacity);
}
}
/*
VoidCallback _onPressed = this.onPressed;
if (this.enable == false) {
_onPressed = () {}; // 不能点击的时候，如果还是this.onPressed，则也会自行该操作
}
ButtonStyle buttonStyle = ButtonStyle(
//定义文本的样式 这里设置的颜色是不起作用的
textStyle:
MaterialStateProperty.all(TextStyle(fontSize: 18, color: Colors.red)),
//设置按钮上字体与图标的颜色
// foregroundColor: MaterialStateProperty.all(_currentTextColor),
//更优美的方式来设置
foregroundColor: MaterialStateProperty.resolveWith(
(states) {
if (states.contains(MaterialState.focused) &&
!states.contains(MaterialState.pressed)) {
//获取焦点时的颜色
return Colors.yellow;
} else if (states.contains(MaterialState.pressed)) {
//按下时的颜色
if (_currentTextColor == Colors.transparent) {
//bugfix:修复透明时候的取值
return _currentTextColor;
}
return _currentTextColor.withOpacity(_highlightOpacity);
}
//默认状态使用灰色
return _currentTextColor;
},
),
//背景颜色
backgroundColor: MaterialStateProperty.resolveWith((states) {
//设置按下时的背景颜色
if (states.contains(MaterialState.pressed)) {
_currentBackgroundHighlightColor;
}
//默认使用背景颜色
return _currentBackgroundColor;
}),
//设置水波纹颜色
overlayColor: MaterialStateProperty.all(Colors.transparent),
// //设置阴影 不适用于这里的TextButton
// elevation: MaterialStateProperty.all(0),
//设置按钮内边距
// padding: MaterialStateProperty.all(EdgeInsets.all(10)),
//设置按钮的大小
// minimumSize: MaterialStateProperty.all(Size(200, 100)),
//设置边框
// side: MaterialStateProperty.all(borderSide),
//外边框装饰 会覆盖 side 配置的样式
shape: MaterialStateProperty.all(shapeBorder),
);
return Container(
width: this.width,
height: this.height,
child: TextButton(
child: this.child,
onPressed: _onPressed, // 必传，但null时候会自动透传
style: buttonStyle,
),
);
*/
VoidCallback? _onPressed = this.onPressed;
if (this.enable == false) {
_onPressed = () {}; // 不能点击的时候，如果还是this.onPressed，则也会自行该操作
}
return CJBGBorderWidget(
width: this.width,
height: this.height,
constraints: this.constraints,
margin: this.margin,
padding: this.padding,
backgroundColor: _currentBackgroundColor,
borderColor: _currentBorderColor,
borderWidth: _currentBorderWidth,
cornerRadius: _cornerRadius,
onPressed: _onPressed, // 非必传,null时候要且会自动结合behavior属性实现透传
behavior: _onPressed == null
? HitTestBehavior.translucent
: HitTestBehavior.deferToChild,
child: DefaultTextStyle(
style: TextStyle(
color: _currentTextColor,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
child,
],
),
),
);
}