Flutter 项目中常用到的效果实现代码持续更新喽！本文包含 Text 效果梳理丨Button 设置圆角及背景色丨Image 圆角设置丨TextField 输入管理丨widget 设置间距丨Offstage 设置隐藏与显示丨Expanded 实现等分布局丨AppBar 设置左侧 widget + 标题 + 右侧 widget丨Tab / bottomNavigationBar 实现底部栏丨加载网页丨拨打电话丨页面重新绘制丨页面跳转及控制
若您有遇到其它相关问题，非常欢迎在评论中留言，我和其他读者小伙伴们将帮助解决并持续更新至此文，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！
Text 尾部显示省略号
Text(
"通过 maxLines + overflow 标签实现尾部显示省略号效果",
maxLines: 1,
overflow: TextOverflow.ellipsis
);
Text 设置行间距
Text(
"通过 style + height 标签实现设置行间距效果" * 3,
style: TextStyle(height: 1.2, fontSize: 18),
textAlign: TextAlign.center
);
Text 设置字间距
Text(
"通过 style + letterSpacing 标签实现设置字间距效果" * 3,
style: TextStyle(letterSpacing: 5, fontSize: 18),
textAlign: TextAlign.center
);
Text 设置字体加粗
Text(
"通过 style + fontWeight 标签实现设置字间距效果" * 3,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
textAlign: TextAlign.center
);
Button 设置圆角及背景色
FlatButton(
child: Container(
child: Text("确认", textAlign: TextAlign.center, style: TextStyle(fontSize: 18)),
),
textColor: Colors.white, // 设置文字颜色（若 Text 的 style 内设置了 color 此项会失效）
color: Color(0xff24344C), // 设置背景色
onPressed: _doSomething(), // 点击事件
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), // 设置圆角
);
Image 圆角设置
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset("images/xxx.png", height: 80, width: 80, fit: BoxFit.fitHeight,),
);
TextField 输入值获取
// 设置 Controller
TextEditingController textEditingController_Name = new TextEditingController();
TextField(
controller: textEditingController_Name, // 绑定 Controller
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: "请输入姓名",
border: InputBorder.none,
filled: true,
fillColor: Color(0xfff1f1f1)
),
),
// 通过 Controller 获取 text
textEditingController_Name.text
TextField 输入类型限制
TextField(
keyboardType: TextInputType.text, // 限制仅可输入汉字
controller: textEditingController_Name,
decoration: InputDecoration(
hintText: "请输入姓名",
border: InputBorder.none,
filled: true,
fillColor: Color(0xfff1f1f1)
),
),
TextField(
keyboardType: TextInputType.phone, // 限制仅可输入手机号
controller: textEditingController_Phone,
decoration: InputDecoration(
hintText: "请输入手机号",
border: InputBorder.none,
filled: true,
fillColor: Color(0xfff1f1f1)
),
),
widget 设置间距
new Padding(
padding: EdgeInsets.only(left:20, top:20, right:20, bottom: 20),
child: Text("通过 Padding + only() 可以分别设置四个方向间距")
);
new Padding(
padding: EdgeInsets.all(20),
child: Text("通过 Padding + all() 可以设置统一的间距")
);
Offstage 设置隐藏与显示
Offstage(
offstage: false, // true = 隐藏；false = 显示，可以定义一个 bool 类型变量，通过 setState 管理赋值
child:child: Text("true = 隐藏；false = 显示")
);
Expanded 实现等分布局
Row(
children: <Widget>[
Expanded(
child: Container(
height: 100.0,
width: double.maxFinite,
child: Container(
color: Colors.deepOrange,
)
),
flex: 1,
),
Expanded(
child: Container(
height: 100.0,
width: double.maxFinite,
child: Container(
color: Colors.indigo,
)
),
flex: 1,
),
Expanded(
child: Container(
height: 100.0,
width: double.maxFinite,
child: Container(
color: Colors.yellow,
)
),
flex: 1,
)
],
);
AppBar 设置左侧 widget + 标题 + 右侧 widget
AppBar(
title: Text('Some'), // 设置标题
centerTitle: true, // 设置标题位置
backgroundColor: Color(0xff24344C), // 设置标题栏背景色
leading: IconButton( // 设置左侧 widget
icon: Icon(Icons.arrow_back),
onPressed: () => {
print("leading")
}
),
actions: <Widget>[ // 设置右侧 widget（可添加多个 widget）
IconButton(icon: Icon(Icons.favorite_border), onPressed: () => {
print("actions")
}),
],
);
Tab / bottomNavigationBar 实现底部栏
我的另一篇博客中有详细讲解：高铁直达，嗖 ~
加载网页
MaterialApp(
routes: {
"/": (_) => new WebviewScaffold(
url: "https://www.baidu.com",
appBar: new AppBar(
title: Text("Some, style: TextStyle(color: Color(0xff333333))),
backgroundColor: Colors.white,
),
withZoom: false, // 是否支持缩放
withJavascript: true, // 是否支持 js
withLocalStorage: true, // 是否本地缓存
),
},
);
拨打电话
dependencies:
flutter:
sdk: flutter
url_launcher: ^3.0.3 # 在 pubspec.yaml 中引入 url_launcher 库
import 'package:url_launcher/url_launcher.dart'; // 导入 url_launcher 库
_phoneCall() async {
String url='tel:010-xxxxxxxx';
if(await canLaunch(url)) {
await launch(url);
} else {
print('error');
}
}
页面数据发生变化后通知重新绘制
setState(() {
indexNum += 1;
});
// 或者（按实际情况需要选择）
indexNum += 1;
setState(() {});
跳转页面但不关闭当前页
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => SomePage())
);
跳转页面并关闭当前页
Navigator.pushAndRemoveUntil(
context,
new MaterialPageRoute(builder: (context) => new SomePage()),
(route) => route == null,
);
关闭当前页面
Navigator.of(context).pop(1);
若您有遇到其它相关问题，非常欢迎在评论中留言，我和其他读者小伙伴们将帮助解决并持续更新至此文，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！
转载：https://blog.csdn.net/qq_15609303/article/details/103305877
查看评论