如何在DartFluttergridView上添加文本？

我做了一個這樣的應用程式：

我想在這個 gridView 結構之上添加一些資訊文本。我該怎么做？我是初學者，我就是做不到。

代碼：

body: Container(
    padding: EdgeInsets.all(7),
    child: GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,

      ),
      itemCount: subjects.length,
      itemBuilder: (BuildContext context, int index) {
        return Padding(
          
          padding: const EdgeInsets.all(2.0),
          child: Container(
            child: InkWell(
              
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(color: Colors.black),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  
                    children: [
                      Image.asset(subjects[index].subjectImage, fit: BoxFit.cover, height: 50, width: 50,),
                      SizedBox(height: 15,),
                      Text(subjects[index].subjectName, style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),),
                      
                    ],
                    
                  ),
                  
                ),
                onTap: () {},
            ),
          ),
        );
      },
    ),

我該怎么做？提前致謝。

uj5u.com熱心網友回復：

試試下面的代碼。我添加了類似的文字Text("1234567890")

body: Container(
  padding: EdgeInsets.all(7),
  child: Column(
    children: [
      Text("1234567890"), //<------------


      Expanded(
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
          ),
          itemCount: subjects.length,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.all(2.0),
              child: Container(
                child: InkWell(
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(color: Colors.black),
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          subjects[index].subjectImage,
                          fit: BoxFit.cover,
                          height: 50,
                          width: 50,
                        ),
                        SizedBox(
                          height: 15,
                        ),
                        Text(
                          subjects[index].subjectName,
                          style: TextStyle(
                              fontSize: 20, fontWeight: FontWeight.w500),
                        ),
                      ],
                    ),
                  ),
                  onTap: () {},
                ),
              ),
            );
          },
        ),
      ),
    ],
  ),
);

uj5u.com熱心網友回復：

您還可以為該螢屏添加帶有資訊文本AppBar的 SliverAppBar或

Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          "Info Text",
          style: TextStyle(color: Colors.black),
        ),
      ),
      body: Container(
        padding: EdgeInsets.all(15),
        child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
          ),
          itemCount: 4,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.all(2.0),
              child: Container(
                child: InkWell(
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(color: Colors.black),
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        FlutterLogo(
                          size: 50,
                        ),
                        SizedBox(
                          height: 15,
                        ),
                        Text(
                          "Hayvanlar",
                          style: TextStyle(
                              fontSize: 20, fontWeight: FontWeight.w500),
                        ),
                      ],
                    ),
                  ),
                  onTap: () {},
                ),
              ),
            );
          },
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );

uj5u.com熱心網友回復：

您可以使用@DholaHardik 的答案。只需要將 Grid View Builder 包裝到一個 Sized Box 并給它一個高度，比如說 height = MediaQuery.of(context).size.height ，如果錯誤說 Overyflow 說 45 像素..您可以將高度更改為 MediaQuery。 of(context).size.height - 45；

標籤：安卓 扑 镖

上一篇：Flutter通過控制器將值從一個螢屏傳遞到另一個螢屏

下一篇：未處理的例外：型別'List<dynamic>'不是型別'Map<String,dynamic>'的子型別顫動錯誤