Flutter實戰視頻-移動電商-45.詳細頁_說明區域UI編寫

45.詳細頁_說明區域UI編寫

pages/details_page/details_expain.dart

?

詳情頁面引用組件

?

?

效果展示：

?

最終代碼：

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';class DetailsExplain extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(color: Colors.white,margin: EdgeInsets.only(top:10.0),width: ScreenUtil().setWidth(750),padding: EdgeInsets.all(10.0),child: Text('說明： > 極速送達 > 正品保證',style: TextStyle(color: Colors.red,fontSize: ScreenUtil().setSp(30)),),);}
}

?

?

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../provide/details_info.dart';
import './details_page/details_top_area.dart';
import './details_page/details_expain.dart';class DetailsPage extends StatelessWidget {final String goodsId;DetailsPage(this.goodsId);//flutter 1.2的最新的寫法 構造函數
@overrideWidget 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){//如果有數據返回一個Containerreturn Container(child: Column(children: <Widget>[DetailsTopArea(),DetailsExplain(),],),);}else{return Text('加載中......');//沒有數據的情況
          }},),);}Future _getBackInfo(BuildContext context) async{await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);//print('加載完成...........');return '完成加載';}}

?