Flutter入门（12）：Flutter 组件之 Raised
2020-09-10 本文已影响0人
Maojunhao
1. 基本介绍
RaisedButton 是一个非常常用的组件，有很多属性来设置按钮的各个状态，非常方便。美中不足的是，按钮无法直接设置 enable，disable 属性，很不人性化。但是按钮的状态设置是一个非常常用的功能，下文会介绍如何实现按钮的状态设置。
2. 示例代码
代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。
3. RaisedButton 使用
3.1 创建容器
优雅的编程，首先创建一个 raisedbutton.dart 文件。
这次和之前的很多文章不同，因为 button 是可以动态改变的，所以这一次创建一个继承 StatefulWidget 的 class。
import 'package:flutter/material.dart';
class FMRaisedButtonVC extends StatefulWidget {
FMRaisedButtonVC({Key key}) : super(key: key);
@override
FMRaisedButtonState createState() => FMRaisedButtonState();
}
class FMRaisedButtonState extends State<FMRaisedButtonVC> {
var btnEnabled = true;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: Scaffold(
appBar: AppBar(
title: Text('RaisedButton'),
backgroundColor: Colors.lightBlue,
),
body: _listView(),
),
);
}
ListView _listView(){
return ListView(
padding: EdgeInsets.all(20),
children: [
_button(),
],
);
}
RaisedButton _button(){
return RaisedButton(
color: Colors.blue,
child: Text("我是一个按钮"),
textColor: Colors.white,
);
}
}
button style.png
3.2 button 的点击事件
我们给 button 增加一个点击事件，一个高亮事件，一个长按事件。
RaisedButton _button(){
return RaisedButton(
onPressed: (){
print("点击了 button");
},
onLongPress: (){
print("长按了 button");
},
onHighlightChanged: (bool b){
print(b ? "button 高亮了" : "button 不亮了");
},
color: Colors.blue,
child: Text("我是一个按钮"),
textColor: Colors.white,
);
}
button press.png
button long press.png
3.3 button 形状、边框
3.3.1 圆形
ListView _listView(){
return ListView(
padding: EdgeInsets.all(20),
children: [
_button(),
_shapeColumn(),
],
);
}
Column _shapeColumn(){
return Column(
children: [
Container(
height: 30,
alignment: Alignment.centerLeft,
child: Text('shape button'),
),
RaisedButton(
color: Colors.blue,
textColor: Colors.white,
child: Container(
height: 100,
width: 100,
child: Text('圆的'),
alignment: Alignment.center,
),
shape: CircleBorder(
side: BorderSide(
width: 2,
color: Colors.red,
style: BorderStyle.solid,
// style: BorderStyle.none,
),
),
),
],
);
}
shape circle solid.png
shape circle none.png
3.3.2 边缘圆形（球场形状）
Column _shapeColumn(){
return Column(
children: [
Container(
height: 30,
alignment: Alignment.centerLeft,
child: Text('shape button'),
),
RaisedButton(
color: Colors.blue,
textColor: Colors.white,
child: Container(
height: 100,
width: 100,
child: Text('圆的'),
alignment: Alignment.center,
),
shape: CircleBorder(
side: BorderSide(
width: 2,
color: Colors.red,
// style: BorderStyle.solid,
style: BorderStyle.none,
),
),
),
Padding(padding: EdgeInsets.all(10)),
RaisedButton(
color: Colors.blue,
textColor: Colors.white,
child: Container(
height: 60,
width: 200,
child: Text('球场的'),
alignment: Alignment.center,
),
shape: StadiumBorder(
side: BorderSide(
width: 2,
color: Colors.red,
style: BorderStyle.solid,
// style: BorderStyle.none,
),
),
),
],
);
}
shape stadium solid.png
shape stadium none.png
3.3.3 圆角
Column _shapeColumn(){
return Column(
children: [
Container(
height: 30,
alignment: Alignment.centerLeft,
child: Text('shape button'),
),
RaisedButton(
color: Colors.blue,
textColor: Colors.white,
child: Container(
height: 100,
width: 100,
child: Text('圆的'),
alignment: Alignment.center,
),
shape: CircleBorder(
side: BorderSide(
width: 2,
color: Colors.red,
// style: BorderStyle.solid,
style: BorderStyle.none,
),
),
),
Padding(padding: EdgeInsets.all(10)),
RaisedButton(
color: Colors.blue,
textColor: Colors.white,
child: Container(
height: 60,
width: 200,
child: Text('球场的'),
alignment: Alignment.center,
),
shape: StadiumBorder(
side: BorderSide(
width: 2,
color: Colors.red,
style: BorderStyle.solid,
// style: BorderStyle.none,
),
),
),
Padding(padding: EdgeInsets.all(10)),
RaisedButton(
color: Colors.blue,
textColor: Colors.white,
child: Container(
height: 60,
width: 200,
child: Text('球场的'),
alignment: Alignment.center,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
width: 2,
color: Colors.red,
// style: BorderStyle.solid,
style: BorderStyle.none,
),
),
),
],
);
}
shape roundrect solid.png
shape roundrect none.png
3.4 button 状态，enable，disable 状态的使用
3.4.1 基本介绍
Button 状态改变其实是一个很常用的功能，但是在 flutter 里并没有直接设置 enable，disable 的方法。这一点不得不说是美中不足的地方，flutter 里的 button 在 onPressed : null 并且 onLongPress : null 时，会认为 button 处于 disabled 状态，会显示设置的 disabledColor 等。
3.4.2 创建一个可改变状态的 button
我们先声明一个变量 btnEnabled，当值为 true 时，给第一个 button 的 onPressed 赋值，当值为 false 时，给第一个 button 的 onPressed 设置为 null。然后点击另一个按钮时，改变 btnEnabled 值，相互取反，利用 setState(){}; 方法来刷新页面，完成预期效果。
var btnEnabled = true;
ListView _listView(){
return ListView(
padding: EdgeInsets.all(20),
children: [
_button(),
_shapeColumn(),
_statefulButton(),
],
);
}
Column _statefulColumn(){
return Column(
children: [
Container(
height: 30,
alignment: Alignment.centerLeft,
child: Text('stateful button'),
),
Padding(padding: EdgeInsets.all(10)),
RaisedButton(
onPressed: btnEnabled ? (){} : null,
textColor: Colors.white,
color: Colors.blue,
highlightColor: Colors.yellow,
disabledColor: Colors.grey,
child: Text('${btnEnabled ? "我现在 enable了":"我现在 disable 了"}'),
),
Padding(padding: EdgeInsets.all(10)),
RaisedButton(
onPressed: () {
btnEnabled = !btnEnabled;
// 执行该方法会刷新页面
setState(() {
});
},
textColor: Colors.white,
color: Colors.blue,
highlightColor: Colors.yellow,
child: Text('点我可以控制上边那家伙'),
),
],
);
}
stateful button enable.png
stateful button disable.png
3.5 自定义 button
3.5.1 简单介绍
在实际项目里，这种文字，特殊形状 button 能满足大部分需求，但肯定不是所有需求。有的按钮需要添加图片，头像，文字等比较复杂的样式。
其实思路很简单，button 的 child 属性可以使用 Container、Row、Column 等组件来组合出一个复杂的效果。
接下来我这边提供一个示例，利用 Container 设置背景图，然后利用 Row 实现左边头像，右边文字的布局，然后右侧文字使用 Column 布局，完成上方和下方两行文字的布局。
ListView _listView(){
return ListView(
padding: EdgeInsets.all(20),
children: [
_button(),
_shapeColumn(),
_statefulColumn(),
_customColumn(),
],
);
}
Column _customColumn(){
return Column(
children: [
Container(
height: 30,
alignment: Alignment.centerLeft,
child: Text('custom button'),
),
Padding(padding: EdgeInsets.all(10)),
RaisedButton(
child: Container(
height: 200,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
),
),
child: Row(
children: [
Container(
width: 150,
height: 150,
color: Colors.red,
child: Image.network('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'主标题',
style: TextStyle(
fontSize: 35,
color: Colors.red,
),
),
Text(
'副标题',
style: TextStyle(
fontSize: 30,
color: Colors.green,
),
),
],
),
],
),
),
),
],
);
}
custom button.png
4. 技术小结
- 基本Button的使用，背景色，文字颜色，文字设置、点击事件。
- 特殊Button的使用，圆角，球场形，圆形等button使用，应用比较广泛。
- Button的状态改变，enable，disable，应用比较广泛。
- 自定义 Button，了解布局，其实可以制定各种样式的 button。
