我正在嘗試基于附加的最小可行示例構建嵌套在帶有顫振的串列視圖中的網格視圖，同時嘗試利用內部網格視圖的 cacheExtent 功能，這將防止專案一次構建。在完整的應用程式中，我做了一些繁重的作業，所以我希望同時加載盡可能少的專案，但不幸的是，當嵌套多個串列時，內部串列似乎忽略了 cacheExtent。對于周圍的串列，cacheExtent 按預期作業。
有沒有人對此有解決方案并且可以向我解釋，雖然它不適用于內部串列？我不僅在尋找復制和粘貼解決方案，而且我真的想了解這里發生了什么，因為我猜這是由我還不知道的任何基本布局策略引起的。
環境：
[?] Flutter (Channel stable, 2.10.0, on macOS 12.2.1 21D62 darwin-arm, locale en-DE)
[?] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
例子：
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:developer';
void main() async {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
// works as expected, second instance of InnerList will not be loaded on startup
cacheExtent: 1,
shrinkWrap: true,
itemCount: 2,
itemBuilder: (context, index) {
return InnerList(index);
},
),
appBar: AppBar(
title: const Text('Home'),
),
drawer: const Drawer(
child: Text("Foobar"),
),
);
}
}
class ItemWidget extends StatelessWidget {
int index;
ItemWidget(this.index);
@override
Widget build(BuildContext context) {
// indicates all widgets are getting build at once, ignoring cacheExtent
log("building widget " index.toString());
// TODO: implement build
return SizedBox(
height: 120,
width: 120,
child: Center(child: Text(index.toString())),
);
}
}
class InnerList extends StatelessWidget {
int index;
InnerList(this.index);
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("Foobar " index.toString()),
GridView.builder(
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 120.0,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
),
itemCount: 100,
primary: false,
// this is ignored, all items of type ItemWidget will be loaded at once
cacheExtent: 1,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return ItemWidget(index);
})
],
);
}
}
// 更新
接受的答案為我指明了正確的方向，將我的搜索引向一個解釋為什么它不起作用的視頻- 簡單的答案是：shrinkWrap 強制串列評估所有孩子，以確定他們的身高。它甚至顯示在一個非常相似的示例中，使用了串列的 shrinkWrap 和物理屬性。Slivers 的解決方案現在看起來如下所示，即使我仍然對在回圈中構造 CostumScrollView 使用的外部串列持懷疑態度。
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:developer';
void main() async {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<Widget> innerLists = [];
@override
void initState() {
super.initState();
// construct lists
for(var i=0; i<10; i ) {
innerLists.add(SliverToBoxAdapter(
child: Text("Foobar " i.toString())
));
innerLists.add(InnerList(i));
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(slivers: innerLists),
appBar: AppBar(
title: const Text('Home'),
),
drawer: const Drawer(
child: Text("Foobar"),
)
);
}
}
class ItemWidget extends StatelessWidget {
int index;
ItemWidget(this.index);
@override
Widget build(BuildContext context) {
// TODO: implement build
return SizedBox(
height: 120,
width: 120,
child: Center(child: Text(index.toString())),
);
}
}
class InnerList extends StatelessWidget {
int index;
InnerList(this.index);
@override
Widget build(BuildContext context) {
return
SliverGrid(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 120.0,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ItemWidget(index);
},
childCount: 100
)
);
}
}
uj5u.com熱心網友回復：
shrinkWrap讓 GridView/ListView 自己決定高度。
沒有shrinkWrap， ListView 無限擴展到主軸。所以它的高度受父框約束，并填充可用空間。在這種情況下，渲染空間是確定的。ListView 僅在可見空間上構建子級。
使用shrinkWrap， ListView 嘗試縮小，盡可能短，除非它可以包含所有孩子，所以它的高度是孩子高度的總和（大約）。在這種情況下，ListView 看不到父約束，因此 ListView 不知道它應該構建多少個子元素，因此它會構建所有元素。
現在讓我們看看你的例子。通過替換logto print，我們得到以下結果。
building widget 0
building widget 1
...
building widget 99
building widget 0
building widget 1
...
building widget 99
雖然我看不到第二個InnerList，但 ListView 構建了第二個孩子。ListView.builder現在注釋掉shrinkWrap
building widget 0
building widget 1
...
building widget 99
如果向下滾動，日志將與第一個相同。
GridView 是一樣的。但是由于布局錯誤，您不能注釋掉 GridView 的 shrinkWrap。這是因為 ListView 為其子項（GridView）提供了無限的高度。如果 GridView 展開，它的高度將是無窮大。
當然使用SizedBox會部分解決這個問題，但也許這不是你想要的。
如果你真的想在這里按需加載，你可以使用sliver。
添加：cacheExtent并不意味著專案數。它是像素數。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/434111.html