如何创建一个占用所有可用空间的可滚动列表？

huangapple
go评论95阅读模式
英文:

How can I create a scrollable list that takes all available space?

问题

以下是已翻译的部分代码：

  1. 我尝试创建一个可滚动的列表，它会自动扩展以占用可用空间。
  3. 以下是我的实际代码，它可以工作，但指定了固定高度为610：
  5. import 'package:flutter/material.dart';
  7. class MyWidget extends StatelessWidget {
  8.   final List<String> _myTable;
  10.   const MyWidget(this._myTable);
  12.   @override
  13.   Widget build(BuildContext context) {
  14.     return Scaffold(
  15.       appBar: AppBar(
  16.         title: const Text('Stackoverflow示例'),
  17.       ),
  18.       body: Container(
  19.         color: const Color.fromRGBO(33, 33, 33, 0.2),
  20.         child: SingleChildScrollView(
  21.           child: Column(
  22.             crossAxisAlignment: CrossAxisAlignment.stretch,
  23.             children: [
  24.               Container(
  25.                 height: 610,
  26.                 color: const Color.fromRGBO(33, 33, 33, 0.2),
  27.                 child: _myTable.isEmpty
  28.                     ? const Center(
  29.                         child: Text('加载表格...'),
  30.                       )
  31.                     : ListView.builder(
  32.                         itemBuilder: (ctx, index) {
  33.                           return Text(_myTable[index]);
  34.                         },
  35.                         itemCount: _myTable.length,
  36.                       ),
  37.               ),
  38.             ],
  39.           ),
  40.         ),
  41.       ),
  42.     );
  43.   }
  44. }

如果删除 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:

  1. import &#39;package:flutter/material.dart&#39;;
  3. class MyWidget extends StatelessWidget {
  4.   final List&lt;String&gt; _myTable;
  6.   const MyWidget(this._myTable);
  8.   @override
  9.   Widget build(BuildContext context) {
  10.     return Scaffold(
  11.       appBar: AppBar(
  12.         title: const Text(&#39;Stackoverflow example&#39;),
  13.       ),
  14.       body: Container(
  15.         color: const Color.fromRGBO(33, 33, 33, 0.2),
  16.         child: SingleChildScrollView(
  17.           child: Column(
  18.             crossAxisAlignment: CrossAxisAlignment.stretch,
  19.             children: [
  20.               Container(
  21.                 height: 610,
  22.                 color: const Color.fromRGBO(33, 33, 33, 0.2),
  23.                 child: _myTable.isEmpty
  24.                     ? const Center(
  25.                         child: Text(&#39;Loading table...&#39;),
  26.                       )
  27.                     : ListView.builder(
  28.                         itemBuilder: (ctx, index) {
  29.                           return Text(_myTable[index]);
  30.                         },
  31.                         itemCount: _myTable.length,
  32.                       ),
  33.               ),
  34.             ],
  35.           ),
  36.         ),
  37.       ),
  38.     );
  39.   }
  40. }

If I remove that height: 610, line I will get the following error:

  1. The following RenderObject was being processed when the exception was fired: RenderViewport#827e1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  2. RenderObject: RenderViewport#827e1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  3.     needs compositing
  4.     parentData: &lt;none&gt; (can use size)
  5.     constraints: BoxConstraints(w=411.4, 0.0&lt;=h&lt;=Infinity)
  6.     size: MISSING
  7.     axisDirection: down
  8.     crossAxisDirection: right
  9.     offset: ScrollPositionWithSingleContext#2ab34(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -&gt; ClampingScrollPhysics -&gt; RangeMaintainingScrollPhysics, IdleScrollActivity#6a07b, ScrollDirection.idle)
  10.     anchor: 0.0
  11.     center child: RenderSliverPadding#4985e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  12.         parentData: paintOffset=Offset(0.0, 0.0)
  13.         constraints: MISSING
  14.         geometry: null
  15.         padding: EdgeInsets.zero
  16.         textDirection: ltr
  17.         child: RenderSliverList#33a39 NEEDS-LAYOUT NEEDS-PAINT
  18.             parentData: paintOffset=Offset(0.0, 0.0)
  19.             constraints: MISSING
  20.             geometry: null
  21.             no children current live
  22. ════════════════════════════════════════════════════════════════════════════════
  24. ════════ Exception caught by rendering library ═════════════════════════════════
  25. RenderBox was not laid out: RenderViewport#827e1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  26. &#39;package:flutter/src/rendering/box.dart&#39;:
  27. box.dart:1
  28. Failed assertion: line 2009 pos 12: &#39;hasSize&#39;
  30. The relevant error-causing widget was
  31. ListView

And that error is pointing to this line of my code:

  1. : 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

以下是代码的翻译部分：

  1. 考虑使用CustomScrollView，它可以帮助您解决问题，查看下面的代码
  3. main.dart
  5. import 'package:flutter/material.dart';
  7. void main() {
  8.   runApp(const MyApp());
  9. }
  11. class MyApp extends StatelessWidget {
  12.   const MyApp({super.key});
  14.   @override
  15.   Widget build(BuildContext context) {
  16.     return const MaterialApp(
  17.       title: "My App",
  18.       home: HomePage(),
  19.     );
  20.   }
  21. }
  23. class HomePage extends StatelessWidget {
  25.   const HomePage({super.key});
  27.   @override
  28.   Widget build(BuildContext context) {
  29.     return Scaffold(
  30.       body: CustomScrollView(
  31.         slivers: [
  32.           SliverAppBar(
  33.             title: const Text("My super App")
  34.           ),
  35.           SliverToBoxAdapter(
  36.             child: Container(
  37.               alignment: Alignment.center,
  38.               height: 100,
  39.               color: Colors.redAccent,
  40.               child: Text("Header view"),
  41.             ),
  42.           ),
  43.           SliverList(delegate: SliverChildListDelegate(
  44.             List.generate(20, (idx) {
  45.                 return Padding(
  46.                   padding: const EdgeInsets.all(10),
  47.                   child: Card(
  48.                     child: ListTile(
  49.                       leading: const Icon(Icons.check_circle),
  50.                       title: Text("Item $idx"),
  51.                     ),
  52.                   ),
  53.                 );
  54.               })
  55.             ),
  56.           ),
  57.         ],
  58.       ),
  59.     );
  60.   }
  61. }

希望这能帮助您理解代码的内容。如果有其他问题，请随时提出。

英文:

Think about using the CustomScrollView which can help you solve your problem, see the code below

main.dart

  1. import &#39;package:flutter/material.dart&#39;;
  4. void main() {
  5.   runApp(const MyApp());
  6. }
  8. class MyApp extends StatelessWidget {
  9. 	const MyApp({super.key});
  11.   @override
  12. 	Widget build(BuildContext context) {
  13. 		return const MaterialApp(
  14. 			title: &quot;My App&quot;,
  15. 			home: HomePage(),
  16. 		);
  17. 	}
  18. }
  20. class HomePage extends StatelessWidget {
  21.   
  22.   const HomePage({super.key});
  23.   
  24.   @override
  25.   Widget build(BuildContext context) {
  26.     return Scaffold(
  27.       body: CustomScrollView(
  28.         slivers: [
  29.           SliverAppBar(
  30.             title: const Text(&quot;My super App&quot;)
  31.           ),
  32.           SliverToBoxAdapter(
  33.             child: Container(
  34.               alignment: Alignment.center,
  35.               height: 100,
  36.               color: Colors.redAccent,
  37.               child: Text(&quot;Header view&quot;),
  38.             ),
  39.           ),
  40.           SliverList(delegate: SliverChildListDelegate(
  41.             List.generate(20, (idx) {
  42.                 return Padding(
  43.                   padding: const EdgeInsets.all(10),
  44.                   child: Card(
  45.                     child: ListTile(
  46.                       leading: const Icon(Icons.check_circle),
  47.                       title: Text(&quot;Item $idx&quot;),
  48.                     ),
  49.                   ),
  50.                 );
  51.               })
  52.       			),
  53.       		),
  54.        	],
  55.       ),
  56.     );
  57.   }
  58. }

huangapple
  • 本文由 发表于 2023年4月10日 20:00:21
  • 转载请务必保留本文链接：https://go.coder-hub.com/75976910.html
  • dart
  • flutter
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定