英文:
How can I create a scrollable list that takes all available space?
问题
以下是已翻译的部分代码：
我尝试创建一个可滚动的列表，它会自动扩展以占用可用空间。
以下是我的实际代码，它可以工作，但指定了固定高度为610：
import 'package:flutter/material.dart';
class MyWidget extends StatelessWidget {
final List<String> _myTable;
const MyWidget(this._myTable);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Stackoverflow示例'),
),
body: Container(
color: const Color.fromRGBO(33, 33, 33, 0.2),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 610,
color: const Color.fromRGBO(33, 33, 33, 0.2),
child: _myTable.isEmpty
? const Center(
child: Text('加载表格...'),
)
: ListView.builder(
itemBuilder: (ctx, index) {
return Text(_myTable[index]);
},
itemCount: _myTable.length,
),
),
],
),
),
),
);
}
}
如果删除 height: 610, 这一行，您将收到以下错误：
以下是错误信息的一部分：
"The following RenderObject was being processed when the exception was fired: RenderViewport#827e1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE..."
您的想法是，如果我创建一个具有固定高度610的列表，如果将其移至另一台设备，可能会崩溃或显示不正常... 那么如何使可滚动列表占用所有可用高度呢？
英文:
I'm trying to make a scrollable list that automatically expands taking the available space.
Here is my actual code which is working but specifying a fixed height of 610:
import 'package:flutter/material.dart';
class MyWidget extends StatelessWidget {
final List<String> _myTable;
const MyWidget(this._myTable);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Stackoverflow example'),
),
body: Container(
color: const Color.fromRGBO(33, 33, 33, 0.2),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 610,
color: const Color.fromRGBO(33, 33, 33, 0.2),
child: _myTable.isEmpty
? const Center(
child: Text('Loading table...'),
)
: ListView.builder(
itemBuilder: (ctx, index) {
return Text(_myTable[index]);
},
itemCount: _myTable.length,
),
),
],
),
),
),
);
}
}
If I remove that height: 610, line I will get the following error:
The following RenderObject was being processed when the exception was fired: RenderViewport#827e1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderViewport#827e1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
parentData: <none> (can use size)
constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity)
size: MISSING
axisDirection: down
crossAxisDirection: right
offset: ScrollPositionWithSingleContext#2ab34(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#6a07b, ScrollDirection.idle)
anchor: 0.0
center child: RenderSliverPadding#4985e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: paintOffset=Offset(0.0, 0.0)
constraints: MISSING
geometry: null
padding: EdgeInsets.zero
textDirection: ltr
child: RenderSliverList#33a39 NEEDS-LAYOUT NEEDS-PAINT
parentData: paintOffset=Offset(0.0, 0.0)
constraints: MISSING
geometry: null
no children current live
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderViewport#827e1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
box.dart:1
Failed assertion: line 2009 pos 12: 'hasSize'
The relevant error-causing widget was
ListView
And that error is pointing to this line of my code:
: ListView.builder(
My idea is that if I create a list with a fixed height of 610 if I move it to another device it will crash or look bad... so how can I make the scrollable list to take all available height?
答案1
得分: 1
以下是代码的翻译部分：
考虑使用CustomScrollView，它可以帮助您解决问题，查看下面的代码
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: "My App",
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
title: const Text("My super App")
),
SliverToBoxAdapter(
child: Container(
alignment: Alignment.center,
height: 100,
color: Colors.redAccent,
child: Text("Header view"),
),
),
SliverList(delegate: SliverChildListDelegate(
List.generate(20, (idx) {
return Padding(
padding: const EdgeInsets.all(10),
child: Card(
child: ListTile(
leading: const Icon(Icons.check_circle),
title: Text("Item $idx"),
),
),
);
})
),
),
],
),
);
}
}
希望这能帮助您理解代码的内容。如果有其他问题，请随时提出。
英文:
Think about using the CustomScrollView which can help you solve your problem, see the code below
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: "My App",
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
title: const Text("My super App")
),
SliverToBoxAdapter(
child: Container(
alignment: Alignment.center,
height: 100,
color: Colors.redAccent,
child: Text("Header view"),
),
),
SliverList(delegate: SliverChildListDelegate(
List.generate(20, (idx) {
return Padding(
padding: const EdgeInsets.all(10),
child: Card(
child: ListTile(
leading: const Icon(Icons.check_circle),
title: Text("Item $idx"),
),
),
);
})
),
),
],
),
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论