我正在try 构建一个布局,其中顶部和底部有两个文本对象,它们的中心是一个列表视图.

这是屏幕的代码

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 40.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                margin: EdgeInsets.symmetric(vertical: 40.0),
                child: Text(
                  DateFormat("hh:mm 'PM ,'  MMMM d").format(DateTime.now()),
                  style: Theme.of(context).textTheme.title,
                ),
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: 4,
                  itemBuilder: (BuildContext context, int index) =>
                      CustomAppText(
                        text: 'Custom App',
                      ),
                ),
              ),
              Container(
                margin: EdgeInsets.symmetric(vertical: 40.0),
                child: Text(
                  "Settings",
                  style: Theme.of(context).textTheme.title,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

给定代码的输出 Output of given code

我正在寻找的设计 Desired output

我try 过使用"中心"小部件,但它没有将ListView居中

推荐答案

ListView填充了整个扩展的小部件,这就是为什么使用中心小部件不起作用,所以应该添加shrinkWrap: true,以便ListView只获取其子部件的高度.

浏览文档后,我发现了有关Flexible Widget的信息

Flexible, which does not force the child to fill the available space.

做出了改变,工作起来很有魅力

Flexible(
  child: ListView.builder(
  shrinkWrap: true,
  itemCount: 4,
  itemBuilder: (BuildContext context, int index) =>
    CustomAppText(
      text: 'Custom App',
    ),
  ),
),

Dart相关问答推荐

S,返回Future.sync()的函数和不需要等待的异步函数有什么区别?

Futures 和异步代码如何在 Dart 中工作?

如何在 Dart 2.17+ 中处理future 的枚举值

如何在 Dart 中将代码迁移到 null 安全

如何将指针事件发送到堆栈中的低级子级

跳过 JavaScript 直接进入 Dart

运行时出现Flutter错误:Error waiting for a debug connection: Bad state: No element

ProcessException:进程C:\..\myapp\android\gradlew.bat异常退出:

Flutter:[cloud_firestore/unknown] NoSuchMethodError:null 上的无效成员:'includeMetadataChanges'(Flutter Web)

Flutter Drawer Widget - 更改 Scaffold.body 内容

Flutter中不能指定MultiPartFile的内容类型

Flitter中的谷歌 map 没有出现

'dart:async' 的函数 `runZoned` 的用途

Dart 中的动态类方法调用

Dart:将十进制转换为十六进制

是什么使它成为 Dart 中的固定长度列表?

有 Javascript 到 Dart 的转换器吗?

何时在 Dart 中使用 part/part of 与 import/export?

Dart:创建一个从 0 到 N 的列表

extends与 implements与 with