1

我将屏幕分成了 3/5。我将“表格”小部件添加到底部。但我希望底部可以滚动。我添加了SingleChildScrollView但它不起作用。我应该怎么办?

void main() {
  runApp(
    MaterialApp(
      home: HomePage(),
    ),
  );
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      key: _scaffoldKey,
      body: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Expanded(
                flex: 3,
                child: Stack(
                  children: <Widget>[
                    OpaqueImage(
                      imageUrl: "assets/images/matematik_sembolleri.jpg",
                    ),
                    SafeArea(
                      child: Padding(
                        padding: const EdgeInsets.all(4),
                        child: Column(
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Align(
                                  alignment: Alignment.centerLeft,
                                  child: IconButton(
                                    icon: const Icon(Icons.menu),
                                    color: Colors.white,
                                    onPressed: () {
                                      _scaffoldKey.currentState.openDrawer();
                                    },
                                  ),
                                ),
                                Align(
                                  alignment: Alignment.topCenter,
                                  child: Text(
                                    "Pirekare Matematik",
                                    textAlign: TextAlign.center,
                                    style: headingTextStyle,
                                  ),
                                ),
                                Align(
                                  alignment: Alignment.centerRight,
                                  child: IconButton(
                                    icon: const Icon(Icons.star),
                                    color: Colors.white,
                                    onPressed: () {},
                                  ),
                                ),
                              ],
                            ),
                            MyInfo(),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),

到目前为止的代码是针对屏幕顶部的并且是固定的。(您必须组合代码。)

下面的代码用于屏幕底部,我希望它们可以滚动。

              Expanded(
                flex: 5,
                child: SingleChildScrollView(
                  child: Container(
                    padding: const EdgeInsets.only(top: 30),
                    color: Colors.white,
                    child: Table(
                      children: [
                        TableRow(
                          children: [
                            GestureDetector(
                              onTap: () {},
                              child: ProfileInfoBigCard(
                                firstText: "Özel Ders Programı",
                                secondText:
                                    "Seviyenize göre çalışma programı ayarlayın",
                                icon: Icon(
                                  Icons.next_plan,
                                  size: 16,
                                  color: blueColor,
                                ),
                              ),
                            ),
                            GestureDetector(
                              onTap: () {},
                              child: ProfileInfoBigCard(
                                  firstText: "Konu Anlatım Videoları",
                                  secondText:
                                      "İstediğiniz konuya videoları izleyerek çalışın",
                                  icon: Icon(
                                    Icons.video_collection_rounded,
                                    size: 16,
                                    color: blueColor,
                                  )),
                            ),
                          ],
                        ),
                        TableRow(
                          children: [
                            GestureDetector(
                              onTap: () {},
                              child: ProfileInfoBigCard(
                                  firstText: "Soru Tipleri",
                                  secondText:
                                      "Soru çözme yeteneğinizi arttırın",
                                  icon: Icon(
                                    Icons.text_snippet_rounded,
                                    size: 16,
                                    color: blueColor,
                                  )),
                            ),
                            GestureDetector(
                              onTap: () {},
                              child: ProfileInfoBigCard(
                                firstText: "Soru Cüzdanı",
                                secondText:
                                    "Kaydetmek istediğiniz soruları cüzdanınıza ekleyin",
                                icon: Icon(
                                  Icons.local_post_office,
                                  size: 16,
                                  color: blueColor,
                                ),
                              ),
                            ),
                          ],
                        ),
                        TableRow(
                          children: [
                            GestureDetector(
                              onTap: () {},
                              child: ProfileInfoBigCard(
                                firstText: "Puan Tablosu",
                                secondText:
                                    "Diğer öğrencilerle puanlarınızı karşılaştırın",
                                icon: Icon(
                                  Icons.leaderboard,
                                  size: 16,
                                  color: blueColor,
                                ),
                              ),
                            ),
                            GestureDetector(
                              onTap: () {},
                              child: ProfileInfoBigCard(
                                firstText: "Türkiye Geneli Sınav",
                                secondText:
                                    "Diğer öğrencilerle aynı anda sınava girin",
                                icon: Icon(
                                  Icons.map,
                                  size: 16,
                                  color: blueColor,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
          Positioned(
            top: screenHeight * (3 / 8) - 60 / 2,
            left: 16,
            right: 16,
            child: Container(
              height: 60,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  ProfileInfoCard(firstText: "54", secondText: "Net"),
                  SizedBox(
                    width: 10,
                  ),
                  ProfileInfoCard(firstText: "543", secondText: "Puanınız"),
                  SizedBox(
                    width: 10,
                  ),
                  ProfileInfoCard(firstText: "15", secondText: "Seviye"),
                ],
              ),
            ),
          ),
        ],
      ),
      drawer: Drawer(
        child: DrawerDosyasi(),
      ),
    );
  }
}

如果我不能使用 Table,你有什么建议?

4

1 回答 1

2

您可以为包裹表格的容器指定高度,并使用 Listview 包裹表格。您现在可以滚动表格行。

Expanded(
            flex: 5,
            child: SingleChildScrollView(
              child: Container(
                height: 80,
                padding: const EdgeInsets.only(top: 30),
                color: Colors.white,
                child: ListView(
                  children: [
                    Table(
                      children: [
                        TableRow(
                          children: [
                            GestureDetector(
                                onTap: () {}, child: Text("heey")),
                            GestureDetector(
                                onTap: () {}, child: Text("heey")),
                          ],
                        ),
                        TableRow(
                          children: [
                            GestureDetector(
                                onTap: () {}, child: Text("heey")),
                            GestureDetector(
                                onTap: () {}, child: Text("heey")),
                          ],
                        ),
                        TableRow(
                          children: [
                            GestureDetector(
                                onTap: () {}, child: Text("heey")),
                            GestureDetector(
                                onTap: () {}, child: Text("heey")),
                          ],
                        ),
                        TableRow(
                          children: [
                            GestureDetector(
                                onTap: () {}, child: Text("heey")),
                            GestureDetector(
                                onTap: () {}, child: Text("heey")),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
于 2020-11-29T21:07:26.963 回答