颤动 - 是否可以在同一屏幕上沿ListView显示小部件?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了颤动 - 是否可以在同一屏幕上沿ListView显示小部件?相关的知识,希望对你有一定的参考价值。

我一直在接触Flutter,我正在尝试构建一个非常简单的ToDo应用程序。它由一个TextField和一个Button(一个表单)组成,它位于屏幕顶部,允许用户将项目添加到文本字段下面的ListView。

我能够显示TextField和Button,我也能够显示ListView,但是当我尝试同时显示两者时,屏幕显示为空。

我错过了什么吗?我尝试将ListView显示到Column小部件中,但看起来它不起作用。

这是我没有表格的短代码:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Mon app",
      home: Scaffold(
        appBar: AppBar(
          title: Text("My app")
        ),
        body: Column(
          children: <Widget>[
            ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
          ],
        )
          ])),
      );
  }
}

谢谢 !

答案

是的。您应该在ListView周围使用Expanded小部件。它的作用是扩展它的子节点(在本例中为ListView)以适应父节点上的最大可用空间,不包括其他小部件占用的空间。

然后,当您想在底部添加输入时,您可以将常规窗口小部件放在Column内部,但在ListView之外,因此列表将滚动并且TextField将始终保持在页面底部。

这是准备好底部输入的代码,但我建议您尝试仔细了解Columns,Rows和Expanded小部件的内容。

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Mon app",
      home: Scaffold(
          appBar: AppBar(
              title: Text("My app")
          ),
          body: Column(
            mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Expanded(
                  child: ListView(
                    children: <Widget>[
                      ListTile(
                        leading: Icon(Icons.map),
                        title: Text('Map'),
                      ),
                      ListTile(
                        leading: Icon(Icons.photo_album),
                        title: Text('Album'),
                      ),
                      ListTile(
                        leading: Icon(Icons.phone),
                        title: Text('Phone'),
                      ),
                    ],
                  ),
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: "What to do?"
                        ),
                      ),
                    ),
                    IconButton(
                      icon: Icon(Icons.send),
                      onPressed: (){
                        //do something
                      },
                    )
                  ],
                )
              ],
          ),
      ),
    );
  }
}
另一答案

qazxsw poi的垂直视口被赋予了无限高度。用ListView小部件包裹你的qazxsw poi

ListView

以上是关于颤动 - 是否可以在同一屏幕上沿ListView显示小部件?的主要内容,如果未能解决你的问题,请参考以下文章

如何使我的 ListView 在颤动中可滚动?

在具有动态高度的同一页面上颤动两个 listview.builder

在点击按钮之前执行的颤动代码

如何在颤动中截取屏幕之外的小部件屏幕截图?

在颤动的页面上同时使用水平和垂直 listview.builder

如何构建包含 ListView.Builder 的自定义行,以在颤动中构建 ElevatedButton?