简单效果实现

在页面中垂直水平居中

使用Center Widget

Center widget可以使其子widget在父widget中居中显示。这是实现居中最简单的方法：

使用Column和MainAxisAlignment

当你有多个widget需要垂直居中时，可以使用Column结合MainAxisAlignment.center：

使用Row和CrossAxisAlignment

对于需要水平居中的情况，可以使用Row结合CrossAxisAlignment.center：

结合Container使用

如果你想要更多的控制，比如设置页面的大小或背景色，可以将Center、Column或Row放在Container中：

使用Align Widget

Align widget也可以实现居中效果，通过设置其alignment属性：

使用Scaffold和Center

在实际应用中，页面通常包含在Scaffold中，你可以这样来居中内容：

布局技巧

column中让子元素撑满

可以使用Spacer填充，实现flex:1 的效果

Container 设置最低高度，内容会撑开最小高度

通过设置 constraints 来为 Container 定义一个最小高度，同时让其高度根据内容自适应：

Container(
  constraints: BoxConstraints(
    minHeight: 100.0, // 设置最低高度
  ),
  padding: EdgeInsets.all(16.0), // 可选：为内容添加内边距
  child: Text(
    '这是一个内容自适应高度的 Container。',
    style: TextStyle(fontSize: 16.0),
  ),
),

状态栏沉浸式且背景与顶部的header融为一体

banner固定不跟随滑动

import 'package:flutter/services.dart';
import 'package:flutter_app/common.dart';
import 'package:get/get.dart';
import 'package:flutter/material.dart';

class AboutPage extends GetView {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return Scaffold(
        body: AnnotatedRegion<SystemUiOverlayStyle>(
          value: SystemUiOverlayStyle.dark,
          child: Stack(
          children: [
            Container(
              width: double.infinity,
              height: 400,
              color: BaseColor.errorColor,
              child: Text('data2'),
            ),
            SafeArea(
              child: SingleChildScrollView(
                child: Container(
                  width: double.infinity,
                  padding: const EdgeInsets.only(top: 20),
                  child: Column(children: [
                    Text('data'),
                    SizedBox(
                      height: 250,
                    ),
                    Text('data'),
                    SizedBox(
                      height: 250,
                    ),
                    Text('data'),
                    SizedBox(
                      height: 250,
                    ),
                    Text('data'),
                    SizedBox(
                      height: 250,
                    )
                  ])
                )
              ),
            ),
          ] 
        ),)
    );
  }
}

跟随滚动条滑动版本

Widget _buildBannerBg() {
    return Container(
      width: double.infinity,
      height: 310.h,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(ImgPath.home.bannerBg),
          fit: BoxFit.fitWidth,
        )
      ),
      child: SafeArea(child: Text('2998')),
    );
  }

  Widget _buildView() {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.light,
        statusBarBrightness: Brightness.light,
      ),
      child: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            _buildBannerBg(),
            XTextWidget.h1('text'),
            XTextWidget.h1('text'),
            XTextWidget.h1('text'),
            SizedBox(height: 100.h,),
            XTextWidget.h1('text'),
            SizedBox(height: 100.h,),
            XTextWidget.h1('text'),
            SizedBox(height: 100.h,),
            XTextWidget.h1('text'),
            SizedBox(height: 100.h,),
            XTextWidget.h1('text'),
            SizedBox(height: 100.h,),
            // Container(
            //   width: double.infinity,
            //   height: 300,
            //   color: Colors.yellow,
            // )
          ],
        ),
      ),
    );
  }

  Widget build(BuildContext context) {
    return GetBuilder<HomeLogic>(builder: (controller) {
      return Scaffold(
        // 让内容延伸到状态栏下方
        extendBodyBehindAppBar: true,
        body: _buildView()
      );
    });
  }