mediaQuery 媒體查詢
使用meidaQuery可以很容易的得到屏幕的寬和高,得到寬和高的代碼如下:
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
Wrap流式佈局
單行的Wrap跟Row表現幾乎一致,單列的Wrap則跟Column表現幾乎一致。但Row與Column都是單行單列的,Wrap則突破了這個限制,mainAxis上空間不足時,則向crossAxis上去擴展顯示。
GestureDetector 手勢操作
GestureDetector它是一個Widget,但沒有任何的顯示功能,而只是一個手勢操作,用來觸發事件的。雖然很多Button組件是有觸發事件的,比如點擊,但是也有一些組件是沒有觸發事件的,比如:Padding、Container、Center這時候想讓它有觸發事件就需要再它們的外層增加一個GestureDetector,比如讓Padding有觸發事件,代碼如下:
Widget buildAddButton(){
return GestureDetector(
onTap:(){
if(list.length<9){
setState(() {
list.insert(list.length-1,buildPhoto());
});
}
},
child: Padding(
padding:const EdgeInsets.all(8.0),
child: Container(
width: 80.0,
height: 80.0,
color: Colors.black54,
child: Icon(Icons.add),
),
),
);
}
入口文件
入口文件很簡單,就是引用了warp_demo.dart文件,然後再home屬性中使用了WarpDemo
import 'package:flutter/material.dart';
import 'warp_demo.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData.dark(),
home:WarpDemo()
);
}
}
warp_demo.dart
import 'package:flutter/material.dart';
//繼承與動態組件
class WarpDemo extends StatefulWidget {
_WarpDemoState createState() => _WarpDemoState();
}
class _WarpDemoState extends State<WarpDemo> {
List<Widget> list; //聲明一個list數組
@override
//初始化狀態,給list添加值,這時候調用了一個自定義方法`buildAddButton`
void initState() {
super.initState();
list = List<Widget>()..add(buildAddButton());
}
@override
Widget build(BuildContext context) {
//得到屏幕的高度和寬度,用來設置Container的寬和高
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
title: Text('Wrap流式佈局'),
),
body:Center(
child: Opacity(
opacity: 0.8,
child: Container(
width: width,
height: height/2,
color: Colors.grey,
child: Wrap( //流式佈局,
children: list,
spacing: 26.0, //設置間距
),
),
),
)
);
}
Widget buildAddButton(){
//返回一個手勢Widget,只用用於顯示事件
return GestureDetector(
onTap:(){
if(list.length<9){
setState(() {
list.insert(list.length-1,buildPhoto());
});
}
},
child: Padding(
padding:const EdgeInsets.all(8.0),
child: Container(
width: 80.0,
height: 80.0,
color: Colors.black54,
child: Icon(Icons.add),
),
),
);
}
Widget buildPhoto(){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 80.0,
height: 80.0,
color: Colors.amber,
child: Center(
child: Text('照片'),
),
),
);
}
}