使这个 flutter 页面可滚动

Question

下面的代码是我的应用程序的主页。 当我想制作一个新的图标/按钮时，它最多只能组成 4 个，如果我达到 5 个或更多，我制作的第 5 个按钮不会出现在我的应用程序中，它显示文本“底部溢出” ，如下所示.

那么如何使这个页面可滚动呢？ 这是我在这个主页上的代码。

import 'package:bacaan_sholat/page/bacaan_sholat_page.dart';
import 'package:bacaan_sholat/page/niat_sholat_page.dart';
import 'package:flutter/material.dart';

class MainPage extends StatefulWidget {
 const MainPage({Key? key}) : super(key: key);

 @override
 _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     backgroundColor: Colors.green.shade100,
     body: SafeArea(
       child: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             Container(
               margin: EdgeInsets.all(10),
               child: Expanded(
                 child: InkWell(
                   highlightColor: Colors.transparent,
                   splashColor: Colors.transparent,
                   onTap: () {
                     Navigator.push(
                         context,
                         MaterialPageRoute(
                             builder: (context) => NiatSholat()));
                   },
                   child: Column(
                     children: [
                       Image(
                         image: AssetImage("assets/images/ic_niat.png"),
                         height: 100,
                         width: 100,
                       ),
                       SizedBox(height: 10),
                       Text(
                         "Doa Harian Muslim",
                         style: TextStyle(
                             fontSize: 14, fontWeight: FontWeight.bold),
                       ),
                     ],
                   ),
                 ),
               ),
             ),
             SizedBox(height: 40),
             Container(
               margin: EdgeInsets.all(10),
               child: Expanded(
                 child: InkWell(
                   highlightColor: Colors.transparent,
                   splashColor: Colors.transparent,
                   onTap: () {
                     Navigator.push(
                         context,
                         MaterialPageRoute(
                             builder: (context) => BacaanSholat()));
                   },
                   child: Column(
                     children: [
                       Image(
                         image: AssetImage("assets/images/ic_doa.png"),
                         height: 100,
                         width: 100,
                       ),
                       SizedBox(height: 10),
                       Text(
                         "Bacaan Sholat",
                         style: TextStyle(
                             fontSize: 14, fontWeight: FontWeight.bold),
                       ),
                     ],
                   ),
                 ),
               ),
             ),
             SizedBox(height: 40),
             Container(
               margin: EdgeInsets.all(10),
               child: Expanded(
                 child: InkWell(
                   highlightColor: Colors.transparent,
                   splashColor: Colors.transparent,
                   onTap: () {
                     Navigator.push(context,
                         MaterialPageRoute(builder: (context) => AyatKursi()));
                   },
                   child: Column(
                     children: [
                       Image(
                         image: AssetImage("assets/images/ic_bacaan.png"),
                         height: 100,
                         width: 100,
                       ),
                       SizedBox(height: 10),
                       Text(
                         "Ayat Kursi",
                         style: TextStyle(
                             fontSize: 14, fontWeight: FontWeight.bold),
                       ),
                     ],
                   ),
                 ),
               ),
             ),
             SizedBox(height: 40),
             Container(
               margin: EdgeInsets.all(10),
               child: Expanded(
                 child: InkWell(
                   highlightColor: Colors.transparent,
                   splashColor: Colors.transparent,
                   onTap: () {
                     Navigator.push(
                         context,
                         MaterialPageRoute(
                             builder: (context) => BacaanSholat()));
                   },
                   child: Column(
                     children: [
                       Image(
                         image: AssetImage("assets/images/ic_doa.png"),
                         height: 100,
                         width: 100,
                       ),
                       SizedBox(height: 10),
                       Text(
                         "Bacaan Sholat",
                         style: TextStyle(
                             fontSize: 14, fontWeight: FontWeight.bold),
                       ),
                     ],
                   ),
                 ),
               ),
             ),
             SizedBox(height: 40),
             Container(
               margin: EdgeInsets.all(10),
               child: Expanded(
                 child: InkWell(
                   highlightColor: Colors.transparent,
                   splashColor: Colors.transparent,
                   onTap: () {
                     Navigator.push(
                         context,
                         MaterialPageRoute(
                             builder: (context) => BacaanSholat()));
                   },
                   child: Column(
                     children: [
                       Image(
                         image: AssetImage("assets/images/ic_doa.png"),
                         height: 100,
                         width: 100,
                       ),
                       SizedBox(height: 10),
                       Text(
                         "Bacaan Sholat",
                         style: TextStyle(
                             fontSize: 14, fontWeight: FontWeight.bold),
                       ),
                     ],
                   ),
                 ),
               ),
             ),
           ],
         ),
       ),
     ),
   );
 }
}

任何帮助或建议对我来说真的很有帮助和意义，在此先感谢。 如果这个问题很混乱，我很抱歉，因为这是我的第一个问题。

Answer 1

使用SingleChildScrollView包装您的Column小部件，这样您的内容 rest 将可滚动。

Answer 2

用SingleChildScrollView包裹它就差不多了！

...
body: SafeArea(
  child: SingleChildScrollView(
    child: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            margin: EdgeInsets.all(10),
...

注意：由于您使用的是SingleChildScrollView ，因此MainAxisAlignment.center不会进行任何更改，因此请考虑将其删除。