簡體   English   中英

如何在 Flutter 的 Scaffold 中刪除 Stack-Pageview 上方不必要的空白?

[英]How to remove Unnecessary Blank space above Stack-Pageview inside Scaffold in Flutter?

空格標有箭頭 我正在制作一個入職屏幕。 一切都按預期工作,但圖像上方有一些空間,從提供的圖像中可以看出,不應該存在。 我嘗試使用 MediaQuery.removePadding 但這沒有幫助。
請查看代碼,如果您可以提出任何建議,請執行。 我在另一個使用 Scaffold->Column->Expanded.... 的項目中遇到了同樣的問題,我希望兩者的解決方案是相似的。

class OnBoardingScreen extends StatefulWidget {
  const OnBoardingScreen({Key? key}) : super(key: key);
  static const String id = 'onboard-screen';
  @override
  State<OnBoardingScreen> createState() => _OnBoardingScreenState();
}

class _OnBoardingScreenState extends State<OnBoardingScreen> {
  int _pages = 0;
  final _controller = PageController();
  final store = GetStorage(); 
  onButtonPressed(context) {
    store.write('onBoarding', true);
    return Navigator.pushReplacementNamed(context, MainScreen.id);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            PageView(
              padEnds: false,
              controller: _controller,
              onPageChanged: ((val) {
                setState(() {
                  _pages = val.toInt();
                });
              }),
              children: [
                OnBoardPage(
                  boardColumn: Column(
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(
                        child: Image.asset(
                          'assets/images/1.png',
                          fit: BoxFit.fill,
                        ),
                      ),
                      const Padding(
                        padding: EdgeInsets.only(left: 16.0, bottom: 10),
                        child: Text(
                          'Welcome\nto Fiesto',
                          textAlign: TextAlign.left,
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 44,
                              color: Colors.white),
                        ),
                      ),
                      const Padding(
                        padding: EdgeInsets.only(left: 16.0),
                        child: Text(
                          'Book restaurants, cafes,\nbanquet halls, marriage halls, etc',
                          textAlign: TextAlign.left,
                          style: TextStyle(
                              fontWeight: FontWeight.normal,
                              fontSize: 22,
                              color: Colors.white),
                        ),
                      ),
                    ],
                  ),
                ),
                OnBoardPage(
                  boardColumn: Column(
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(
                        child: Image.asset(
                          'assets/images/2.png',
                        ),
                      ),
                      const Padding(
                        padding: EdgeInsets.only(left: 16.0, bottom: 10),
                        child: Text(
                          'Fiesto\nParty Services',
                          textAlign: TextAlign.left,
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 44,
                              color: Colors.white),
                        ),
                      ),
                      const Padding(
                        padding: EdgeInsets.only(left: 16.0),
                        child: Text(
                          'Get all kinds of party services and\nsolutions',
                          textAlign: TextAlign.left,
                          style: TextStyle(
                              fontWeight: FontWeight.normal,
                              fontSize: 22,
                              color: Colors.white),
                        ),
                      ),
                    ],
                  ),
                ),
            Positioned.fill(
              bottom: 180,
              child: Align(
                alignment: Alignment.bottomCenter,
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    AnimatedSmoothIndicator(
                      //https://pub.dev/smooth_page_indicator
                      activeIndex: _pages,
                      count: 5,
                      effect: const JumpingDotEffect(
                        dotHeight: 16,
                        dotWidth: 16,
                        jumpScale: .7,
                        verticalOffset: 15,
                        dotColor: Colors.grey,
                        activeDotColor: Colors.yellow,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Positioned(
              right: 16,
              bottom: 120,
              child: TextButton(
                child: const Text(
                  'Skip & Proceed to\nLogin/Signup',
                  textAlign: TextAlign.end,
                  style: TextStyle(
                    color: Color.fromARGB(255, 117, 13, 13),
                    fontSize: 14,
                    decoration: TextDecoration.underline,
                  ),
                ),
                onPressed: () {
                  onButtonPressed(context);
                },
              ),
            ),
            Positioned(
              right: 16,
              bottom: 50,
              width: 150,
              height: 50,
              child: ElevatedButton(
                onPressed: () {
                  if (_pages == 0) {
                    _controller.animateToPage(
                      1,
                      duration: const Duration(milliseconds: 400),
                      curve: Curves.easeInOut,
                    );
                  } else if (_pages == 1) {
                    _controller.animateToPage(
                      2,
                      duration: const Duration(milliseconds: 400),
                      curve: Curves.easeInOut,
                    );
                  } else if (_pages == 2) {
                    _controller.animateToPage(
                      3,
                      duration: const Duration(milliseconds: 400),
                      curve: Curves.easeInOut,
                    );
                  } else if (_pages == 3) {
                    _controller.animateToPage(
                      4,
                      duration: const Duration(milliseconds: 400),
                      curve: Curves.easeInOut,
                    );
                  } else if (_pages == 4) {
                    onButtonPressed(context);
                  }
                },
                child: _pages <= 3
                    ? const Text(
                        'Next',
                        style: TextStyle(fontSize: 22),
                      )
                    : const Text(
                        'Login/Signup',
                        style: TextStyle(fontSize: 22),
                      ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class OnBoardPage extends StatelessWidget {
  final Column? boardColumn;
  const OnBoardPage({Key? key, this.boardColumn}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color.fromARGB(255, 0, 0, 0),
      child: boardColumn,
    );
  }
}

移除SafeArea或指定 top: false。

你有這個問題,因為Column小部件有一個默認值

mainAxisAlignment: MainAxisAlignment.center

所以我將其更改為:

mainAxisAlignment: MainAxisAlignment.start


我對您的代碼的測試也表明圖像的性質正在發揮作用。 因為它的作品就像你想要的那樣在我的圖像上。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM