Flutter组件大全(五)
1.Slider 滑块
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
double value = 0.0;
@override
Widget build(BuildContext context) {
return Slider(
value: value,
min: 0.0,
max: 100.0,
label: '当前音量',
activeColor: Colors.green,
inactiveColor: Colors.redAccent,
// 分块
divisions: 100,
onChanged: (double){
setState(() {
value = double.roundToDouble();
});
},
// 滑动结束
onChangeEnd: (val){},
// 滑动开始
onChangeStart: (val){},
);
}
}
复制代码
2.SliderTheme 滑块主题
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
double value = 0.0;
@override
Widget build(BuildContext context) {
return SliderTheme(
data: SliderTheme.of(context).copyWith(
// 实际进度颜色
activeTrackColor: Colors.yellowAccent,
// 未拖动颜色
inactiveTrackColor: Colors.red,
// 提示进度的气泡的背景色
valueIndicatorColor: Colors.blue,
// 气泡的文本颜色
// valueIndicatorTextStyle: TextStyle(color: Colors.white)
// 滑块中心的颜色
thumbColor: Colors.blueAccent,
// 滑块边缘的颜色
overlayColor: Colors.white,
// 分割线颜色
inactiveTickMarkColor: Colors.black
),
child: Slider(
value: value,
min: 0.0,
max: 100.0,
label: '当前音量',
// activeColor: Colors.green,
// inactiveColor: Colors.redAccent,
// 分块
divisions: 100,
onChanged: (double){
setState(() {
value = double.roundToDouble();
});
},
// 滑动结束
onChangeEnd: (val){},
// 滑动开始
onChangeStart: (val){},
)
);
}
}
复制代码
3. 动画padding
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
double paddingValue = 10.0;
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 300.0,
height: 300.0,
color: Colors.red,
// 带动画的内边距
child: AnimatedPadding(
// 均衡的内边距
padding: EdgeInsets.symmetric(
horizontal: paddingValue,
vertical: paddingValue
),
// 动画时长
duration: Duration(milliseconds: 100),
// 动画类型
curve: Curves.easeInOut,
child: Container(
height: 200.0,
color: Colors.green
),
),
),
RaisedButton(
child: Text('切换'),
onPressed: (){
if(paddingValue == 10.0){
setState(() {
paddingValue = 20.0;
});
}else{
setState(() {
paddingValue = 10.0;
});
}
}
)
],
);
}
}
复制代码
4.padding
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
double paddingValue = 10.0;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
width:300.0,
height: 300.0,
color: Colors.grey,
padding: EdgeInsets.all(10.0),
child: Container(
color: Colors.greenAccent,
)
)
],
);
}
}
复制代码
5.IndexedStack
只显示一个元素bash
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
final int currentIndex = 1;
@override
Widget build(BuildContext context) {
return IndexedStack(
index: currentIndex,
// 文本容器
children: <Widget>[
// 显示当前 元素
CircleAvatar(
backgroundColor: Colors.greenAccent,
radius: 50.0
),
Container(
decoration: BoxDecoration(
color: Colors.blue
),
child: Text(
'嘿嘿'
),
)
],
);
}
}
复制代码
6.Stack 层叠 定位
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
width: 300.0,
height: 300.0,
color: Colors.red,
// 层叠组件
child: Stack(
alignment: Alignment.center,
overflow: Overflow.clip,
children: <Widget>[
// 这里 的组件 谁在前面 谁就在下面
Container(
color: Colors.yellowAccent,
width: 100.0,
height: 50.0
),
Text('data'),
Positioned(
left: 10,
bottom: 30,
child: Text('相对父容器定位')
)
],
),
)
]
);
}
}
复制代码
7.AnimatedSwitcher 动画
class DemoPage extends StatefulWidget {
const DemoPage({Key key}) : super(key : key);
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
int count = 0 ;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
// 带动画的Switcher
AnimatedSwitcher(
// 动画时长
duration: Duration(milliseconds: 500),
// 过分
transitionBuilder: (Widget child, Animation<double> animation){
return ScaleTransition(scale: animation, child: child);
},
// 动画显示内容
child: Text(
"动画$count",
key: ValueKey<int>(count),
),
),
RaisedButton(
child: Text('点击'),
onPressed: (){
setState(() {
count += 1;
});
}
)
],
);
}
}
复制代码
8.Switch 开关
class DemoPage extends StatefulWidget {
const DemoPage({Key key}) : super(key : key);
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
int count = 0 ;
bool check = false;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Switch(
// 是否打开
value: check,
onChanged: (bool val){
setState(() {
check = val;
});
}
),
Switch.adaptive(
value: check,
// 激活时的颜色
activeColor: Colors.red,
// 非激活状态
inactiveThumbColor: Colors.greenAccent,
// 非激活状态的 轨道颜色
inactiveTrackColor: Colors.yellow,
// inactiveThumbImage: ,
onChanged: (bool val){
setState(() {
check = val;
});
}
)
],
);
}
}
复制代码
9.SwitchListTile
class DemoPage extends StatefulWidget {
const DemoPage({Key key}) : super(key : key);
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
int count = 0 ;
bool check = false;
@override
Widget build(BuildContext context) {
return Column(
// mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SwitchListTile(
value: check,
activeColor: Colors.yellow,
title: Text("打印"),
subtitle: Text('子标题'),
secondary: Icon(Icons.print),
onChanged: (bool val){
setState(() {
check = val;
});
}
)
],
);
}
}
复制代码
10.Table
class DemoPage extends StatefulWidget {
const DemoPage({Key key}) : super(key : key);
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
int count = 0 ;
bool check = false;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Table(
columnWidths: {
// 列宽
0: FixedColumnWidth(100.0),
1: FixedColumnWidth(100.0),
2: FixedColumnWidth(100.0),
},
border: TableBorder.all(
color: Colors.greenAccent,
width: 2.0,
),
children: [
TableRow(
decoration: BoxDecoration(
color: Colors.greenAccent,
),
children: [
SizedBox(
height: 30.0,
child: Text('姓名'),
),
Text('性别'),
Text('年龄'),
]
),
TableRow(
children: [
Text('张三'),
Text('男'),
Text('10'),
]
),
TableRow(
children: [
Text('李四'),
Text('女'),
Text('20'),
]
)
]
)
],
);
}
}
复制代码
11.RichText 富文本组件
class DemoPage extends StatefulWidget {
const DemoPage({Key key}) : super(key : key);
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
RichText(
text: TextSpan(
text: 'I',
children: <TextSpan>[
TextSpan(
text: 'want',
style: TextStyle(
color: Colors.yellow
)
),
TextSpan(
text: 'study',
style: TextStyle(
color: Colors.red
)
)
]
),
)
],
);
}
}
复制代码
12.Text
class DemoPage extends StatefulWidget {
const DemoPage({Key key}) : super(key : key);
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'hello word',
style: TextStyle(
color: Colors.red,
fontSize: 36.0,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.blue
),
),
Text(
'hello word',
style: TextStyle(
color: Colors.red,
fontSize: 36.0,
decoration: TextDecoration.underline,
decorationColor: Colors.blue
),
),
Text(
'hello word',
style: TextStyle(
color: Colors.red,
fontSize: 36.0,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed,
decorationColor: Colors.blue
),
),
Text(
'hello word',
style: TextStyle(
color: Colors.red,
fontSize: 36.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed,
decorationColor: Colors.blue
),
)
],
);
}
}
复制代码
13.MaterialApp
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
/*
* title 在任务管理器窗口所显示的应用名字
* theme 应用UI
* color 应用的主要颜色
* home 应用默认所显示的界面 Widget
* routes 应用的定机导航表格 多页面应用用来控制页面跳转的
* initiakRoute 第一个显示的路由名字 默认值未 window.defaultRouteName
* onGenerateRoute 生成路由的回调函数 当导航的命名路由的时候 会使用这个来生成界面
* onLocaleChanged 系统修该语言的时候 触发的回调
* navigatorObservers: 应用Navigator 的监听器
* dubugShowMaterialGrid 是否显示 material design
* showPerformanceOverlay 显示性能标签
* checkerboardRasterCacheImage
* showSemanticsDebugger
* debugShowCheckedModeBanner
* */
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '应用名称',
home: Text('body'),
theme: ThemeData(
primaryColor: Colors.redAccent
),
routes: <String, WidgetBuilder>{
// '/': (BuildContext context) => D();
}
);
}
}
复制代码
相关文章
- 1. Flutter组件大全(四)
- 2. Flutter组件大全(一)
- 3. Flutter开发之组件大全-CheckBoxListTitle组件
- 4. SpringCloud五大组件
- 5. SpringMVC 五大组件
- 6. 【Flutter实战】文本组件及五大案例
- 7. Flutter实战】文本组件及五大案例
- 8. Flutter Widget大全
- 9. vue 组件大全
- 10. SpringCloud五大核心组件
- 更多相关文章...
- • Docker 命令大全 - Docker教程
- • ASP AdRotator 组件 - ASP 教程
- • JDK13 GA发布：5大特性解读
- • RxJava操作符（五）Error Handling
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章