在 Flutter 中将带有文本的容器放在列表视图上方

Question

我想在 Flutter 的 ListView 上方放置一个带有一些文本的简单容器。我试图将文本放在 AppBar 中，但我发现 AppBar 并非旨在这样做。

它应该看起来像这样（除了描述应该外包给专用容器）。 Example Image

我尝试关注但没有完成任何事情。

return Scaffold(
  body: Container(
      padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
      child: ListView(
        scrollDirection: Axis.vertical,
        children: [
          Category(),
          Category(),
          Category(),
          Category(),
          Category(),
          Category(),
          Category(),
          Category(),
          Category(),
          Category(),
          Category(),
          Category(),
          Category(),
      ],
    ),
  ),
);

我是 Flutter 的新手，也是 Whosebug 的新手，所以我希望这个问题很好。提前致谢并致以亲切的问候:)

Answer 1

首先，用 Expanded 包裹你的 ListView，然后用 Column 包裹它。下面是一些代码示例：

return Container(
      padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
      child: Column(
        mainAxisSize: MainAxisSize.max,
        children: [
          const Text("HEADER"),
          Expanded(
            child: ListView.builder(
                itemCount: 10,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      height: 30,
                      width: 50,
                      color: Colors.red,
                    ),
                  );
                }),
          ),
        ],
      ),
    );

Answer 2

用柱子包裹容器。
在列中添加带有文本的容器。
用 Expanded 包裹 ListView 的容器，这样它就可以占据屏幕中剩余的 space。
在 ListView 中启用 shrinkWrap。

return Scaffold(
  body: Column(
    children: [
      const FlutterLogo(), //replace it with your container with text
      Expanded(
        child: Container(
          padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
          child: ListView(
            shrinkWrap: true, //make sure to enable shrink wrap
            scrollDirection: Axis.vertical,
            children: [
              ...

在 Flutter 中将带有文本的容器放在列表视图上方

Putting Container with Text above List View in Flutter

dart

flutter

flutter-layout