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

时间:2019-01-06 21:49:38

标签: listview dart flutter flutter-layout flutter-dependencies

我已经开始接触Flutter,并且正在尝试构建一个非常简单的ToDo应用。 它由位于屏幕顶部的TextField和一个Button(窗体)组成,这些按钮使用户可以将项目添加到textfield下方的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'),
            ),
          ],
        )
          ])),
      );
  }
}

谢谢!

2 个答案:

答案 0 :(得分:3)

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

然后,当您想在底部添加输入时,只需将普通窗口小部件放在Column内,但放在ListView外,这样列表将滚动并且TextField将始终停留在页面底部。

下面是准备好底部输入的代码,但我建议您尝试仔细了解“列”,“行”和“扩展”窗口小部件的情况。

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
                      },
                    )
                  ],
                )
              ],
          ),
      ),
    );
  }
}

答案 1 :(得分:0)

@Aspect @Component public class FailoverRedisCacheAspect { private static class FailoverRedisCache extends RedisCache { protected FailoverRedisCache(RedisCache redisCache) { super(redisCache.getName(), redisCache.getNativeCache(), redisCache.getCacheConfiguration()); } @Override public <T> T get(Object key, Callable<T> valueLoader) { try { return super.get(key, valueLoader); } catch (RuntimeException ex) { return valueFromLoader(key, valueLoader); } } private <T> T valueFromLoader(Object key, Callable<T> valueLoader) { try { return valueLoader.call(); } catch (Exception e) { throw new ValueRetrievalException(key, valueLoader, e); } } } @Around("execution(* org.springframework.cache.support.AbstractCacheManager.getCache (..))") public Cache beforeSampleCreation(ProceedingJoinPoint proceedingJoinPoint) { try { Cache cache = (Cache) proceedingJoinPoint.proceed(proceedingJoinPoint.getArgs()); if (cache instanceof RedisCache) { return new FailoverRedisCache((RedisCache) cache); } else { return cache; } } catch (Throwable ex) { return null; } } } 的垂直视口被赋予无限的高度。用$ clj -Sdeps '{:deps {nrepl/nrepl {:mvn/version "0.5.3"}}}' -m nrepl.cmdline 小部件包装ListView

ListView