我想在水平GridView或ListView中以兩行顯示目錄串列
。
而不是單行的串列資料來自服務器。
橫向的ListView在單行時作業良好
我怎樣才能像下面的GIF一樣實作這個目標呢？
下面是我的圖片
下圖是我需要的GIF圖片
[
下面是完整的代碼 橫向的ListView在一行的情況下作業正常，我需要將它轉換為GridView，這樣它就可以顯示兩行并可橫向滾動
_catList() {
return Container(
高度。150。
孩子。ListView.builder(
itemCount: catList.length < 10 ? catList.length : 10,
scrollDirection: Axis.horizontal,
shrinkWrap: true。
物理學。AlwaysScrollableScrollPhysics()。
itemBuilder。(context, index) {
return Padding(
padding: const EdgeInsetsDirectional.only(end: 10) 。
孩子。GestureDetector()
onTap: () async {
if (catList[index].subList == null ||
catList[index].subList.length == 0) {
await Navigator.push(
背景關系。
MaterialPageRoute(
builder: (context) => ProductList(
name: catList[index].name,
id: catList[index].id,
標簽。false。
updateHome: widget.updateHome)。
));
if ( mounted) setState(() {});
} else {
await Navigator.push(
背景關系。
MaterialPageRoute(
builder: (context) => SubCat(
title: catList[index].name,
subList: catList[index].subList,
updateHome: widget.updateHome)。
));
if ( mounted) setState(() {});
}
},
孩子。列()
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
填充()
padding: const EdgeInsetsDirectional.only(bottom: 5.0) 。
孩子。new ClipRect(
borderRadius: borderRadius.round(25.0)。
孩子。new FadeInImage(
fadeInDuration: Duration（毫秒：50）。
影像。網路影像(
catList[index].image,
),
高度。100.0。
寬度：100.0。
適合。BoxFit.cover。
imageErrorBuilder。(context, error, stackTrace) =>
erroWidget(100)。
//errorWidget: (context, url, e) => placeHolder(50),
placeHolder: placeHolder(100)。
),
),
),
容器(
孩子。文本(
catList[index].name,
風格。Theme.of(context).textTheme.caption.copyWith(
color: colors.fontColor,
fontWeight: FontWeight.w600,
字體大小。15）。)
溢位。TextOverflow.ellipsis。
textAlign: TextAlign.center,
),
width: 100,
),
],
),
),
);
},
),
);
}
uj5u.com熱心網友回復：
你可以使用網格視圖來存檔這個東西。這里有一個配置的片段。
GridView.count(
shrinkWrap: true,
crossAxisCount: 2,
物理學。const ClampingScrollPhysics（）。
滾動方向。Axis.horizontal,
crossAxisSpacing: 10,
mainAxisSpacing: 20。
children: ...)
在這里 crossAxisCount: 2,scrollDirection: Axis.horizontal是你需要的。
uj5u.com熱心網友回復：
你可以使用ListView.builder，使用itemCount: catList.length/2并回傳一個有兩個專案（index和index 1）的Column
或者使用GridView.count：
Container(
高度。150,
孩子。GridView.count(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
crossAxisCount: 2,
children: catList.isEmpty ? [Container()] : catList.map((cat) {
return Padding(
padding: const EdgeInsetsDirectional.only(end: 10) 。
孩子。GestureDetector(
孩子。列(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
填充()
padding: const EdgeInsetsDirectional.only(bottom: 5.0) 。
孩子。new ClipRect(
borderRadius: borderRadius.round(25.0)。
孩子。new FadeInImage(
fadeInDuration: Duration（毫秒：50）。
影像。NetworkImage(
cat.image,
),
高度。100.0。
width: 100.0,
適合。BoxFit.cover。
imageErrorBuilder。(context, error, stackTrace) =>
erroWidget(100)。
placeholder: placeHolder(100)。
),
),
),
容器(
孩子。文本(
cat.name,
風格。Theme.of(context).textTheme.caption.copyWith(
color: colors.fontColor,
fontWeight: FontWeight.w600,
字體大小。15）。)
溢位。TextOverflow.ellipsis。
textAlign: TextAlign.center,
),
width: 100,
),
],
),
),
);
}).toList()。
),
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/315672.html
標籤：