flutter學習--流式佈局 模擬添加照片效果

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('照片'),
          ),
        ),
    );
  }
}