找不到有关如何在自定义小部件中使用 ListView 的正确布局选项

Posted 2023-02-23

【中文标题】找不到有关如何在自定义小部件中使用 ListView 的正确布局选项

【英文标题】：Can't find correct layout option for how to use ListView in a custom Widget

【发布时间】：2020-01-12 13:09:38

【问题描述】：

我正在尝试提取重用一个简单的小部件，然后在父小部件中引用该小部件。自定义小部件只是使用一行来布局一个 textField 和一个按钮，在此下方我想要一个显示项目的列表视图。然后我将自定义小部件嵌入到父级中，但它不断抛出错误。我还没有弄清楚如何让自定义小部件工作，我可以在其中使用 ListView 或列布局。下面是演示该问题的 2 个简化小部件。

这里是父小部件，我在这里调用自定义小部件 PlayListControl()

   @override
 Widget build(BuildContext context) 
   return Scaffold(
   appBar: AppBar(
    title: Text('My Playlists'),
  ),
  body: Container(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      textDirection: TextDirection.ltr,
      children: <Widget>[
        Container(
          alignment: Alignment.center,
          margin: EdgeInsets.all(20),
          child: Text('Test'),
        ),
        PlayListControl(),
      ],
    ),
  ),
  drawer: SideDrawer(),
);
 

这里是播放列表控件小部件。

  @override
 Widget build(BuildContext context) 
   return Container(
  margin: EdgeInsets.all(10),
    child: Column(
    children: <Widget>[
      Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 200,
              child: TextField(),
            ),
            ButtonTheme(
                minWidth: 30,
                child: RaisedButton(
                  textColor: Colors.white,
                  child: Text('add'),
                  onPressed: () ,
                )),
          ],
        ),
      ),
      Expanded(
        child: ListView(
          children: <Widget>[
            Text('Widget 1'),
            Text('Widget 2'),
          ],
        ),
      )
    ],
  ),
);

无论我尝试什么，它总是抱怨与高度相关的布局问题。我原以为将 ListView 包装在 Expanded 中可以解决问题，但事实并非如此。只有当我使用容器并指定高度时，我才不会收到错误，但我想使用任何可用空间。

如何让这个 playlistcontrol() 小部件在父控件中正确呈现？

【问题讨论】：

尝试将PlayListControl 小部件包装在Expanded 中

是的，试过了……没用。仅供参考，如果我使用 singlechildscrollview，并且在 Column 内部......它可以让我这样做。但是，我的目标是使用 ListView.builder() 动态创建列表...

我认为问题是列中的listView。这个解决方案可以帮助***.com/questions/45669202/…

我之前读过那个帖子，因此我尝试使用推荐的“扩展”包装。根据文档，这应该将 listView 限制为剩余的任何空间......但在我的情况下，它会引发错误。一旦区分，如果我在父小部件中使用扩展列表视图，它就可以工作。当我引用子小部件时会出现此问题。在容器上使用 Height 是可行的，但它不会动态使用可用空间。

您在哪个容器上设置高度？子小部件中的那个？

【参考方案1】：

您忘记将 PlayListControl 的第一个容器包装在 Expanded 小部件中..

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        title: 'Flutter Demo',
        home: Scaffold(
          appBar: AppBar(
            title: Text('My Playlists'),
          ),
          body: Container(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.start,
              textDirection: TextDirection.ltr,
              children: <Widget>[
                Container(
                  alignment: Alignment.center,
                  margin: EdgeInsets.all(20),
                  child: Text('Test'),
                ),
                PlayListControl(),
              ],
            ),
          ),
        ));
  


class PlayListControl extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Expanded(
      child: Container(
        margin: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    width: 200,
                    child: TextField(),
                  ),
                  ButtonTheme(
                      minWidth: 30,
                      child: RaisedButton(
                        textColor: Colors.white,
                        child: Text('add'),
                        onPressed: () ,
                      )),
                ],
              ),
            ),
            Expanded(
              child: ListView(
                children: <Widget>[
                  Text('Widget 1'),
                  Text('Widget 2'),
                ],
              ),
            )
          ],
        ),
      ),
    );