45.詳細(xì)頁(yè)_說(shuō)明區(qū)域UI編寫

pages/details_page/details_expain.dart

?

詳情頁(yè)面引用組件

?

?

效果展示：

?

最終代碼：

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('說(shuō)明： > 極速送達(dá) > 正品保證',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的最新的寫法 構(gòu)造函數(shù) @overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(leading: IconButton(icon: Icon(Icons.arrow_back),onPressed: (){Navigator.pop(context);//返回上一個(gè)頁(yè)面 },),title: Text('商品詳細(xì)頁(yè)'),),body: FutureBuilder(future: _getBackInfo(context),builder: (context,snapshot){//判斷是否有數(shù)據(jù)if(snapshot.hasData){//如果有數(shù)據(jù)返回一個(gè)Containerreturn Container(child: Column(children: <Widget>[DetailsTopArea(),DetailsExplain(),],),);}else{return Text('加載中......');//沒(méi)有數(shù)據(jù)的情況 }},),);}Future _getBackInfo(BuildContext context) async{await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);//print('加載完成...........');return '完成加載';}} details_page.dart

?

轉(zhuǎn)載于:https://www.cnblogs.com/wangjunwei/p/10747539.html

總結(jié)

以上是生活随笔為你收集整理的Flutter实战视频-移动电商-45.详细页_说明区域UI编写的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。