為什么我的應用在模擬器中看起來不錯，但在手機上卻不行？

Question

所以這是我第一個使用 flutter 的項目。 我對項目進行了編碼，一切都很好，但是當我為我的手機導出 apk 時，該應用程序看起來很垃圾且無法使用。 github上的整個項目

這就是我的應用在我的手機上的外觀（Galaxy S21）在我的手機上的外觀

這是代碼在 Android 仿真器（像素 3a）上的外觀

我知道有不同的屏幕尺寸，但我認為這是另一個我不明白的問題。 那是我的主要代碼。dart 代碼：我真的不知道為什么我的應用程序在 android 模擬器中看起來不錯，但在我的 Galaxy S21 上卻是垃圾。

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: StreamBuilder<QuerySnapshot>(
        stream:
            FirebaseFirestore.instance.collection("Einkaufsliste").snapshots(),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return const Text('Etwas ist schief gelaufen!');
          } else if (snapshot.hasData || snapshot.data != null) {
            return ListView.builder(
                shrinkWrap: true,
                itemCount: snapshot.data?.docs.length,
                itemBuilder: (BuildContext context, int index) {
                  QueryDocumentSnapshot<Object?>? documentSnapshot =
                      snapshot.data?.docs[index];
                  return Dismissible(
                      key: Key(index.toString()),
                      child: Card(
                        elevation: 4,
                        child: ListTile(
                          title: Text((documentSnapshot != null)
                              ? (documentSnapshot["todoTitle"])
                              : ""),
                          subtitle: Text((documentSnapshot != null)
                              ? ((documentSnapshot["todoDesc"] != null)
                                  ? documentSnapshot["todoDesc"]
                                  : "")
                              : ""),
                          trailing: Wrap(
                            children: <Widget>[
                              Text((documentSnapshot != null)
                                  ? ((documentSnapshot["todoStatus"] != null)
                                      ? documentSnapshot["todoStatus"]
                                      : "")
                                  : ""),
                              const Spacer(),
                              IconButton(
                                icon: const Icon(Icons.edit),
                                color: Colors.blue,
                                onPressed: () {
                                  if (documentSnapshot != null) {
                                    title_edit = documentSnapshot["todoTitle"];
                                    subtitle_edit =
                                        documentSnapshot["todoDesc"];
                                    status_edit =
                                        documentSnapshot["todoStatus"];
                                    deleteTodo((documentSnapshot != null)
                                        ? (documentSnapshot["todoTitle"])
                                        : "");
                                  }
                                  MaterialPageRoute materialPageRoute =
                                      MaterialPageRoute(
                                    builder: (context) => edit_product(),
                                  );
                                  Navigator.of(context).push(materialPageRoute);
                                },
                              ),
                              IconButton(
                                icon: const Icon(Icons.delete),
                                color: Colors.red,
                                onPressed: () {
                                  setState(() {
                                    deleteTodo((documentSnapshot != null)
                                        ? (documentSnapshot["todoTitle"])
                                        : "");
                                  });
                                },
                              ),
                            ],
                          ),
                        ),
                      ));
                });
          }
          return const Center(
            child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(
                Colors.red,
              ),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          MaterialPageRoute materialPageRoute = MaterialPageRoute(
            builder: (context) => product(),
          );
          Navigator.of(context).push(materialPageRoute);
        },
        child: const Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
    );
  }
} 

Answer 1

您可以使用響應式代碼方法

你可以搜索一下這個小部件

MediaQuery.of(context)..
Flexible(),
Expanded(),
Card()

並且您的 Text() 小部件不會從屏幕或列表中溢出，您可以包裝 Card() 小部件您的文本