如何创建带有文本和列表的小部件？

Question

我是 Flutter 新手，我不明白我做错了什么。遵循一些资源并没有真正帮助我找到以下代码的问题：

class history_screen extends StatelessWidget {
  const history_screen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    DB_Helper db = DB_Helper.instance;
    final rides = Provider.of<AppState>(context).rides;

    if (rides.isEmpty) {
      return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(
                Icons.edit_off,
                size: height * 0.04,
              ),
              Text(
                "No history available",
                style: TextStyle(fontSize: height * 0.02),
              )
        ],
      )
      );
    }

    return
          RideList(rides: rides);

  }
}

所以上面的代码正在工作并且正在渲染我或消息 rides.isEmpty 或由 RideList( 给出的列表) rides:rides) 如果ride.isEmpty 错误。

现在我想做的是在返回列表时自定义视图，以便添加标题和其他对象，所以我尝试了：

  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    DB_Helper db = DB_Helper.instance;
    final rides = Provider.of<AppState>(context).rides;

    if (rides.isEmpty) {
      return Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Icon(
            Icons.edit_off,
            size: height * 0.04,
          ),
          Text(
            "No history available",
            style: TextStyle(fontSize: height * 0.02),
          )
        ],
      ));
    }

    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          "Ride & Track ",
          style: TextStyle(fontSize: height * 0.02),
        ),
        RideList(rides: rides)
      ],
    ));
  }

但列表不再呈现，并且文本不居中

如何我可以解决这个问题吗？

[编辑]

RideList 代码：

 @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: rides.length,
        itemBuilder: (context, index) {
          Ride ride = rides[index];
          return RideItem(
            ride: ride,
            onTap: () =>
                Navigator.of(context).push(MaterialPageRoute(builder: (_) {
              return RideDetailScreen(
                ride: ride,
                onDelete: () => _removeRide(context, ride),
              );
            })),
          );
        });
  }

Answer 1

我们先来看看为什么会出现这个问题。基本上，Column 会尝试使用最小的可用空间，而 ListView 需要无限的空间。因此，列是一个受约束的小部件，而列表视图需要无限的空间。并且 listview 将只使用其父级的空间。

一种方法是设置 shr​​inkWrap: true，另一种方法是用 Expanded 包裹 ListView。

Answer 2

所以我必须修改RideList：

@override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("Title"),
        ListView.builder(
            shrinkWrap: true,
            itemCount: rides.length,
            itemBuilder: (context, index) {
              Ride ride = rides[index];
              return RideItem(
                ride: ride,
                onTap: () =>
                    Navigator.of(context).push(MaterialPageRoute(builder: (_) {
                  return RideDetailScreen(
                    ride: ride,
                    onDelete: () => _removeRide(context, ride),
                  );
                })),
              );
            }),
        
      ],
    );
  }