Flutter開發--------點選圖檔放大

動态表格

• 前言
• 準備工具
• 實作界面
• 執行個體代碼分析
• • 資料處理
  • 表格處理
  • • 每一行處理
  • 頁面完整代碼

前言

工作中，都會有這樣子的需求，首先是小圖檔，在點選圖檔然後可以放大檢視。

準備工具

這套課程是采用VScode進行開發的。目前在此之前請準備好Flutter開發環境，我這裡就不進行講解了。

實作界面

首先是一個清單的展示

執行個體代碼分析

這裡執行個體的特點是: UI和資料進行分離，使用到了狀态管理。

技術棧涉及到：extended_image: ^0.4.1 圖檔放大插件

flutter_screenutil: ^0.5.1 适配插件

provide: ^1.0.2 狀态管理插件

資料處理

建立一個table.dart中有一個TableProvide類，模拟後端提到的資料進行處理

import 'package:flutter/material.dart';

class TableProvide with ChangeNotifier{ 
  List contextList=[];
 


  getTableInfo() async{
      contextList=[
        {'image': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560056361666&di=8018ffbf93410bf8dca7c895e5aa0ab9&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fimages%2F20140419%2Fsy_59409112881.jpg', 'text': '第一幅'},
        {'image': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560056361666&di=7a3ef3440290b447a242ca96b3a55a9c&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fphotoblog%2F9%2F5%2F1%2F0%2F9510448%2F20099%2F2%2F1251889640200.jpg', 'text': '第二幅'},
        {'image': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560056361665&di=a2269bf89f57e9cd417741271b9e7084&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1106%2F29%2Fc6%2F8173931_8173931_1309340870844.jpg', 'text': '第三幅'},
      ];
  }

  
}
           

表格處理

我們這裡使用ListView這個元件

每一行處理

Widget rowContext(context,index){
    return Row(
      children: <Widget>[
        InkWell(
          child: Container(                                                                //顯示圖檔
            width: ScreenUtil().setWidth(400),
            height: ScreenUtil().setHeight(200),
            margin: EdgeInsets.only(bottom: 5),
            child: Image.network('${contextList[index]['image']}',fit: BoxFit.fill,),
          ),
          onTap: (){
            Navigator.of(context).push(MaterialPageRoute(builder: (context){
              return MyHomePage(imageUrl:contextList[index]['image']);
            }));
          },
        ),
        Text('${contextList[index]['text']}')                                     //顯示文字
      ],
    );
  }

           

頁面完整代碼

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provide/provide.dart';
import '../provide/table.dart';
import './big.dart';

class CommodityPage extends StatefulWidget {
  CommodityPage({Key key}) : super(key: key);

  _CommodityPageState createState() => _CommodityPageState();
}

class _CommodityPageState extends State<CommodityPage> {

  List contextList;

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance=ScreenUtil(width: 750, height: 1334)..init(context);
    return Scaffold(
      appBar: AppBar(title: Text('測試'),),
      body:Container(
        child: FutureBuilder(
          future: _getInfo(context),     //調用請求方法
          builder: (context,snapshot){             
            if(snapshot.hasData){                      //判斷是否有傳回值

              contextList=Provide.value<TableProvide>(context).contextList;       //傳回結果進行指派

              return Center(
                child: ListView.builder(                                      //用listView進行布局
                  itemCount: contextList.length,
                  itemBuilder: (BuildContext context,int index){
                    return rowContext(context,index);
                  },
                )
              );
            }else{
              return Center(
                child:Text('加載中')
              );
            }
            },
        ),
      ),
    );
  }

  Widget rowContext(context,index){
    return Row(
      children: <Widget>[
        InkWell(
          child: Container(                                                                //顯示圖檔
            width: ScreenUtil().setWidth(400),
            height: ScreenUtil().setHeight(200),
            margin: EdgeInsets.only(bottom: 5),
            child: Image.network('${contextList[index]['image']}',fit: BoxFit.fill,),
          ),
          onTap: (){
            Navigator.of(context).push(MaterialPageRoute(builder: (context){
              return MyHomePage(imageUrl:contextList[index]['image']);
            }));
          },
        ),
        Text('${contextList[index]['text']}')                                     //顯示文字
      ],
    );
  }

 

  Future _getInfo(BuildContext context) async{
    await Provide.value<TableProvide>(context).getTableInfo();
    return '加載完畢';
  }
}

           

這個需求想必大家都會碰到的，希望可以幫助到大家，大家可以到我的github下載下傳學習