緊接著上篇文章，將詳情頁面的評論以及相關文章頁面的構建
遇到的問題
介面的構建比較簡單，重要的是如何巢狀，上篇用來markdown去載入詳情內容，看了看flutter_markdown這個庫的原始碼，發現有這麼一段程式碼
@override
Widget build(BuildContext context, List<Widget> children) {
return ListView(
padding: padding,
controller: controller,
physics: physics,
shrinkWrap: shrinkWrap,
children: children,
);
}
複製程式碼可以看出來裡面是巢狀了一個ListView元件，所以想要在這個列表的下面新增內容，涉及到ListView套用ListView元件。最大的問題就是滑動衝突的問題。強大的flutter也是為我們想好了解決的方案.子ListView元件控制不滑動。
physics: NeverScrollableScrollPhysics()
複製程式碼緊接著shrinkWrap屬性：該屬性表示是否根據子元件的總長度來設定ListView的長度，預設值為false 。預設情況下，ListView的會在滾動方向儘可能多的佔用空間。當ListView在一個無邊界(滾動方向上)的容器中時，shrinkWrap必須為true
shrinkWrap: true,
複製程式碼這樣可以給markdown元件加上這兩個屬性，再使用之前封裝好的common_list巢狀進來
Markdown(
key: listGlobalKey,
data: _markdownData,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
);
Expanded(
child: CommonListWiget(
scrollController: _scrollController,
networkApi: (currentPage) async {
return ['1', '2', '3'];
},
itemBuilder: (BuildContext context, int position) {
if (position == 0) {
return this.renderContent();
}
return Container(
height: 200,
width: Get.width,
decoration: BoxDecoration(color: Colors.red));
},
))
複製程式碼就可以了。實現ListView套用ListView的無限高度的問題
相關文章構建
renderArts() {
return Container(
width: Get.width,
decoration: BoxDecoration(color: Colors.white),
child: Column(
children: [
Container(
height: 40,
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 20),
child: Text('相關文章'),
),
Divider(
height: 1,
color: Colors.grey,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('一步一步完成Flutter應用開發-掘金App文章詳情， 懸浮，標題動畫'),
Padding(padding: EdgeInsets.only(top: 10)),
Text(
'14贊·5評論 一天清晨',
style: TextStyle(color: Colors.grey, fontSize: 12),
),
],
),
),
],
),
);
}
複製程式碼評論列表構建
分成3部分實現佈局 基本資訊，評論內容， 回覆內容
renderComment() {
return Container(
width: Get.width,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Row(
children: [
Container(
margin: EdgeInsets.only(right: 10),
height: 40,
width: 40,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(20),
)),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'一天清晨',
style: TextStyle(color: Colors.blue),
),
Container(
margin: EdgeInsets.only(left: 5),
padding: EdgeInsets.symmetric(
horizontal: 2, vertical: 2),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(4)),
child: Text(
'LV2',
style:
TextStyle(color: Colors.white, fontSize: 10),
),
)
],
),
Text('大前端開發·20小時之前',
style: TextStyle(color: Colors.grey, fontSize: 10))
],
),
),
Container(
alignment: Alignment.topCenter,
width: 80,
height: 40,
// decoration: BoxDecoration(color: Colors.red),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.ac_unit,
size: 18,
color: Colors.grey,
),
Icon(Icons.ac_unit, size: 18, color: Colors.grey)
],
),
),
],
),
),
Container(
margin: EdgeInsets.symmetric(vertical: 10),
padding: EdgeInsets.only(left: 50),
child: Text('評論的內容是是啥啥事啥',
style: TextStyle(color: Colors.black, fontSize: 14)),
),
Container(
margin: EdgeInsets.only(top: 10, bottom: 10, left: 50),
padding: EdgeInsets.symmetric(horizontal: 10),
width: Get.width - 50,
decoration: BoxDecoration(color: Colors.black.withOpacity(0.1)),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(padding: EdgeInsets.only(top: 5)),
RichText(
text: TextSpan(
text: '一天清晨(作者)',
style: TextStyle(color: Colors.blue),
children: [
TextSpan(
text: ' : 哈哈哈啊哈哈哈',
style: TextStyle(color: Colors.black)),
])),
Padding(padding: EdgeInsets.only(top: 10)),
RichText(
text: TextSpan(
text: '一天清晨(作者)',
style: TextStyle(color: Colors.blue),
children: [
TextSpan(
text: ' 回覆 ', style: TextStyle(color: Colors.black)),
TextSpan(
text: '誰誰誰', style: TextStyle(color: Colors.blue)),
TextSpan(
text: ' : 哈哈哈啊哈哈哈',
style: TextStyle(color: Colors.black)),
])),
Padding(padding: EdgeInsets.only(top: 5)),
],
),
)
],
),
);
}
複製程式碼over~~~