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
只顯示一個元素
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();
}
);
}
}
複製程式碼