如何在 Flutter 中将 List View 放入 children []答案

【问题标题】：How to put List View in children [], in Flutter如何在 Flutter 中将 List View 放入 children []
【发布时间】：2021-10-14 19:57:53
【问题描述】：

我需要帮助。我是 Flutter 和 Dart 的新手。我试图像这样将列表视图放在children [], 中，这样我就可以在此之后创建一个新行：

class ListViewColumn extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(
     body: new Container(
      child: Column(
       children: <Widget>[
         new ListView(
           children: <Widget>[
             new ListTile(
               title: Text('Name : Kareen'),
             ),
             new ListTile(
               title: Text('Class : 12th grade'),
             ),
             new ListTile(
               title: Text('Student Number : 27'),
             )
           ],
         ),
         new Row(
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           children: <Widget>[
             new Column(
               children: <Widget>[
                 Icon(
                   Icons.thumb_up_alt,
                   color: Colors.blue
                 ),
                 Text('Like', style: new TextStyle(fontWeight: FontWeight.bold))
               ],
             ),
             new Column(
               children: <Widget>[
                 Icon(
                   Icons.chat_outlined,
                   color: Colors.black
                 ),
                 Text('Comment', style: new TextStyle(fontWeight: FontWeight.bold))
               ],
             ),
             new Column(
               children: <Widget>[
                 Icon(
                   Icons.favorite,
                   color: Colors.pink
                 ),
                 Text('Save', style: new TextStyle(fontWeight: FontWeight.bold))
               ],
             ),
           ],
         )
       ],
     ),  ),  );  } }

我在互联网上寻找解决方案，但网站一直给我提供列表视图只能应用于 body: , 和 child: , 的信息。我想知道是否有人可以帮助我。提前谢谢你。

【问题讨论】：

标签： android flutter dart listview mobile

【解决方案1】：

看看。你错过了shrinkWrap: true

import 'package:flutter/material.dart';

class ListViewColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: <Widget>[
        new ListView(
          shrinkWrap: true,
          children: <Widget>[
            new ListTile(
              title: Text('Name : Kareen'),
            ),
            new ListTile(
              title: Text('Class : 12th grade'),
            ),
            new ListTile(
              title: Text('Student Number : 27'),
            )
          ],
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            new Column(
              children: <Widget>[
                Icon(Icons.thumb_up_alt, color: Colors.blue),
                Text('Like', style: new TextStyle(fontWeight: FontWeight.bold))
              ],
            ),
            new Column(
              children: <Widget>[
                Icon(Icons.chat_outlined, color: Colors.black),
                Text('Comment',
                    style: new TextStyle(fontWeight: FontWeight.bold))
              ],
            ),
            new Column(
              children: <Widget>[
                Icon(Icons.favorite, color: Colors.pink),
                Text('Save', style: new TextStyle(fontWeight: FontWeight.bold))
              ],
            ),
          ],
        )
      ],
    ));
  }
}

输出：

【讨论】：

【解决方案2】：

只需用Expanded 小部件包装ListView：

class ListViewColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(  /// insert this widget.
            child: new ListView(
              children: <Widget>[
                new ListTile(
                  title: Text('Name : Kareen'),
                ),
                new ListTile(
                  title: Text('Class : 12th grade'),
                ),
                new ListTile(
                  title: Text('Student Number : 27'),
                )
              ],
            ),
          ),
          new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new Column(
                children: <Widget>[
                  Icon(Icons.thumb_up_alt, color: Colors.blue),
                  Text('Like',
                      style: new TextStyle(fontWeight: FontWeight.bold))
                ],
              ),
              new Column(
                children: <Widget>[
                  Icon(Icons.chat_outlined, color: Colors.black),
                  Text('Comment',
                      style: new TextStyle(fontWeight: FontWeight.bold))
                ],
              ),
              new Column(
                children: <Widget>[
                  Icon(Icons.favorite, color: Colors.pink),
                  Text('Save',
                      style: new TextStyle(fontWeight: FontWeight.bold))
                ],
              ),
            ],
          )
        ],
      ),
    );
  }
}

【讨论】：