为什么 ListView 小部件将项目作为列返回？答案

【问题标题】：Why does ListView widget returns items as columns?为什么 ListView 小部件将项目作为列返回？
【发布时间】：2021-09-16 08:47:14
【问题描述】：

我是 Flutter 的新手，我正在尝试实现一个简单的布局，其中布局是一列小部件，列中的第一项是文本小部件，第二项是包含多个提升的行按钮，这是我的代码，它将提升的按钮彼此下方呈现，而不是彼此相邻呈现，所以我在这里做错了什么？

       import 'package:flutter/material.dart';
       
       void main() => runApp(MyApp());
       
       class MyApp extends StatelessWidget {
         final List<Map<String, dynamic>> questions = [
           {
             'question': "What's your favorite color?",
             'answers': ['Red', 'Blue', 'White', 'Black']
           },
           {
             'question': "What's your favorite animal?",
             'answers': ['Dog', 'Cat', 'Lion', 'Monkey']
           }
         ];
       
         Widget build(BuildContext context) {
           return MaterialApp(
             home: Scaffold(
               appBar: AppBar(
                 title: Text('Quiz'),
               ),
               body: Container(
                 height: double.maxFinite,
                 child: ListView.builder(
                     shrinkWrap: true,
                     itemCount: questions.length,
                     itemBuilder: (BuildContext context, int questionsIndex) {
                       return Column(
                           mainAxisSize: MainAxisSize.min,
                           children: <Widget>[
                             SizedBox(height: 20.0,),
                             Text(questions[questionsIndex]['question']),
                             SizedBox(height: 10.0,),
                             ListView.builder(
                                 itemCount:
                                     questions[questionsIndex]['answers'].length,
                                 shrinkWrap: true,
                                 itemBuilder: (BuildContext context, int answerIndex) {
                                   return Row(
                                     mainAxisAlignment: MainAxisAlignment.center,
                                     children: <Widget>[
                                       ElevatedButton(
                                         onPressed: null,
                                         child: Text(questions[questionsIndex]
                                             ['answers'][answerIndex]),
                                       ),
                                     ],
                                   );
                                 }),
                             SizedBox(height: 20.0,),
                           ]);
                     }),
               ),
             ),
           );
         }
       }

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

在 Flutter 中 ListView 默认使用 Axis.Vertial 渲染。

如果您希望按钮在水平轴上彼此相邻呈现，则可以将 ListView 的 scrollDirection 属性设置为 Axis.Hortizonal。

如果您必须使用ListView，那么您需要constrain 高度。

示例：

...
SizedBox(
 height: 64,
 child: ListView.builder(
  scrollDirection : Axis.horizontal,
...
    )
)

【讨论】：

您好 Rohan 感谢您的回答，我已经尝试过了，但收到此错误 'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1865 pos 16: 'constraints.hasBoundedHeight': is not true.
用 sizedbox 包裹列表视图并为其指定高度 ~60 或根据您在列表视图中的小部件增加高度
谢谢@DeepakLohmod，这行得通:)
更新了我的答案，以解决后续问题。