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 '完成加載';}} details_page.dart

?

轉載于:https://www.cnblogs.com/wangjunwei/p/10747539.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。