20個Flutter實例視頻教程-第12節: 流式佈局 模擬添加照片效果

視頻地址；

https://www.bilibili.com/video/av39709290/?p=12

博客地址：

https://jspang.com/post/flutterDemo.html#toc-b97

 

要實現的效果;

 

這裏主要是用咱們的流式佈局

順序排，通常到頭了 會順序往下排列。

還會學到 媒體查詢、手勢操做

先寫main.dart

 

建立warp_demo.dart

這個組件確定是動態的。

 那些加號都是數組生成的，因此這裏聲明一個數組。數組裏面添加按鈕，添加按鈕咱們須要單獨寫一個方法

咱們的Container是沒有手勢識別的。若是想讓它具備手勢識別，就要外層給他加一個GestureDetector手勢識別

至關於咱們 html裏面的div咱們要向讓它點擊挑戰連接的話，就在外層加一個a標籤。

點擊的時候觸發的事件：咱們如今尚未這個buildPhoto方法

 

 

 

 

 

建立黃色的正方形的組件buildPhoto方法

buildPhoto也返回一個widget

 

開始洗build

 

 

 

代碼修正，

由於是一個動態的組件，因此要修改裏面的list的狀態的時候 必須使用setState方法

 

效果展現：

每次點擊加好左側就會加一個照片的黃色正方形。

 

 

代碼：

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: ThemeData.light(),//輕量級的皮膚
      home: WarpDemo()
    );
  }
}

main.dart

 

 

import 'package:flutter/material.dart';

class WarpDemo extends StatefulWidget {
  @override
  _WarpDemoState createState() => _WarpDemoState();
}

class _WarpDemoState extends State<WarpDemo> {
  List<Widget> list;

  void initState() { 
    super.initState();
    list=List<Widget>()
    ..add(buildAddButton());//這裏添加了一個buildAddButton的方法，咱們在下面去建立
  }
  @override
  Widget build(BuildContext context) {
    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,//就把list放在這
              spacing: 26.0,//間距
            ),
          ),
        ),
      ),
    );
  }
  //這個方法返回了一個組件
  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),
        ),
      ),
    );
  }

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

warp_demo.dart