Flutter實戰視頻-移動電商-42.詳細頁_UI主頁面架構搭建

42.詳細頁_UI主頁面架構搭建

詳細分紅六大部分拆分開

body裏面用FutureBuilder異步加載。

FutureBuilder裏面的furure屬性這裏用一個方法，必須返回的也是future

 

把咱們的方法修改成返回的類型爲Future。咱們直接返回的是一個字符串。由於咱們裏面使用了provide，因此其實這裏咱們隨便返回個字符串就沒那麼重要 了。

 

咱們在頁面上默認放上一個Text的widget顯示傳過來的id

 

運行頁面：

 點擊左上角的返回能夠返回到上一頁

 

 

 

 

 

 

最終代碼：

 

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../provide/details_info.dart';

class DetailsPage extends StatelessWidget {
  final String goodsId;

  DetailsPage(this.goodsId);//flutter 1.2的最新的寫法 構造函數

  @override
  Widget build(BuildContext context) {
 
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: (){
            Navigator.pop(context);//返回上一個頁面
          },
        ),
        title: Text('商品詳細頁'),
      ),
      body: FutureBuilder(
        future: _getBackInfo(context),
        builder: (context,snapshot){
          //判斷是否有數據
          if(snapshot.hasData){
            //若是有數據返回一個Container
            return Container(
              child: Column(
                children: <Widget>[
                  Text('商品ID：${goodsId}')
                ],
              ),
            );
          }else{
            return Text('加載中......');//沒有數據的狀況
          }
        },
      ),
    );
  }

  Future _getBackInfo(BuildContext context) async{
    await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);
    //print('加載完成...........');
    return '完成加載';
  }

}