Flutter 1.22版本新增了3个按钮,TextButton OutlinedButton ElevatedButton.有的小伙伴可能奇怪,已经有了FlatButton RaiseButton FloatingActionButton,为什么还要新增3个button呢,至于原因,在我的上一篇文章开头,讲得很清楚了.需要了解的小伙伴可以去看看为什么要新增三个按钮. 这里不再赘述.我们直接开始分享一些新增按钮的基本用法.
首先看一下flutter SDK给我们的api都有哪些
按住command键,从TextButton进入sdk文档,新增加了一个ButtonStyle 类型的style, 继续点进去就能看到更多信息
class ButtonStyle with Diagnosticable {
/// Create a [ButtonStyle].
const ButtonStyle({
this.textStyle,
this.backgroundColor,
this.foregroundColor,
this.overlayColor,
this.shadowColor,
this.elevation,
this.padding,
this.minimumSize,
this.side,
this.shape,
this.mouseCursor,
this.visualDensity,
this.tapTargetSize,
this.animationDuration,
this.enableFeedback,
});
我们知道已经给我们提供了backgroundColor属性,细心的小伙伴发现让我们传进去的类型是MaterialStateProperty<Color> .不再是我们熟悉的Colors.red这种类型.第一次看到要传入这类型,难免心慌.但我们静下来想想,要传MaterialStateProperty<T>,无非要知道MaterialStateProperty的构造方法,如果知道了它是怎么创建的,那么返回的就是MaterialStateProperty<T>这个类型了吧. 继续按着MaterialStateProperty进入sdk就能看到
abstract class MaterialStateProperty<T> {
/// Returns a value of type `T` that depends on [states].
///
/// Widgets like [TextButton] and [ElevatedButton] apply this method to their
/// current [MaterialState]s to compute colors and other visual parameters
/// at build time.
T resolve(Set<MaterialState> states);
/// Resolves the value for the given set of states if `value` is a
/// [MaterialStateProperty], otherwise returns the value itself.
///
/// This is useful for widgets that have parameters which can optionally be a
/// [MaterialStateProperty]. For example, [InkWell.mouseCursor] can be a
/// [MouseCursor] or a [MaterialStateProperty<MouseCursor>].
static T resolveAs<T>(T value, Set<MaterialState> states) {
if (value is MaterialStateProperty<T>) {
final MaterialStateProperty<T> property = value;
return property.resolve(states);
}
return value;
}
/// Convenience method for creating a [MaterialStateProperty] from a
/// [MaterialPropertyResolver] function alone.
static MaterialStateProperty<T> resolveWith<T>(MaterialPropertyResolver<T> callback) => _MaterialStatePropertyWith<T>(callback);
/// Convenience method for creating a [MaterialStateProperty] that resolves
/// to a single value for all states.
static MaterialStateProperty<T> all<T>(T value) => _MaterialStatePropertyAll<T>(value);
}
我们可以看到上面的代码里面提供了3个静态方法(static),可以方便创建MaterialStateProperty<T>类型.
static T resolveAs<T>(T value, Set<MaterialState> states)
static MaterialStateProperty<T> resolveWith<T>(MaterialPropertyResolver<T> callback)
static MaterialStateProperty<T> all<T>(T value)
三个方法中,最简单的是第三个方法
static MaterialStateProperty<T> all<T>(T value)
也就是说如果我按下面写
MaterialStateProperty.all(Colors.red)
会得到MaterialStateProperty<Color>类型的东西.这样刚好可以传给MaterialStateProperty<Color> backgroundColor.
切入正题,上代码
TextButton(
onPressed: () {
print("-----");
},
child: Text("登录"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.grey),
foregroundColor: MaterialStateProperty.all(Colors.white)
),
)
设置了背景色,前景色,效果如下图
下面我们再来一个比较综合的实例
TextButton(
onPressed: () {
print("-----");
},
child: Text("登录"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.grey),
foregroundColor: MaterialStateProperty.all(Colors.white),
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 30)),
// shape: MaterialStateProperty.all(OutlinedBorder(side: BorderSide(color: Colors.red))),
shape: MaterialStateProperty.all(RoundedRectangleBorder(
side: BorderSide(color: Colors.red, width: 10),
borderRadius: BorderRadius.circular(25))),
side: MaterialStateProperty.all(
BorderSide(color: Colors.purple, width: 3)),
),
),
运行效果如下
我们来理一下里面的坑
// shape: MaterialStateProperty.all(OutlinedBorder(side: BorderSide(color: Colors.red))),
第一个坑
虽然shape,要传入的是OutlinedBorder类型的,但是如果像上面这样传进去,会报错的. 仔细分析下,可以看出OutlinedBorder是抽象类, 需要用它的子类来作为参数,我这里是传了RoundedRectangleBorder,当然还可以传别的子类
第二个坑
红色的代码并没有生效,而是紫色的代码真正起作用了,边框颜色为紫色,宽度为3
一个注意点
textStyle的使用大家知道怎么使用就好了,但背景色,前景色不在textStyle里面.
结尾
今天的分享先到这里了,感觉对小伙伴们有点帮助的话,欢迎点赞,加关注哦，后面会分享更多干货~~好运!!!
