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

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) 给出的列表 if ride.isEmpty is wrong.

现在我想做的是在 returns 列表时自定义视图，以便添加标题和其他 objects，所以我尝试了 :

  @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

所以我不得不修改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),
                  );
                })),
              );
            }),
        
      ],
    );
  }

Answer 2

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

一种方法是shrinkWrap: true，另一种方法是用Expanded包装ListView。

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

How to create a widget with a Text and a list?

flutter

flutter-widget