如何創建帶有文本和串列的小部件？

我是 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);

  }
}

所以上面的代碼正在作業并且正在呈現我或ifrides.isEmpty給出的訊息或串列。RideList(rides:rides)ride.isEmpty is wrong

現在我想做的是在回傳串列時自定義視圖，以便添加標題和其他物件，所以我嘗試了：

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

uj5u.com熱心網友回復：

我們先來看看為什么會出現這個問題。基本上， Column 會嘗試使用最小的可用空間，而 ListView 需要無限的空間。因此，列是受約束的小部件，而串列視圖需要無限空間。而 listview 將只使用其父級的空間。

一種方法是制作shrinkWrap: true，另一種方法是用 Expanded 包裝 ListView。

uj5u.com熱心網友回復：

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

標籤：扑 颤振小部件

上一篇：樣式和格式化文本背景和布局

下一篇：我是否需要為Firebase深層鏈接提供域名才能將用戶重定向到我在Playstore上的顫振應用程式？