Flutter基础(前端教程④-组件拼接)

基础1

Dart 复制代码
class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(  // 或者用 Row,取决于你想要垂直还是水平排列
        children: [
          Bg(),
          TopAppBar(),
          WelcomeBanner(),  // 第一个 widget
          Tabs(),   
          Frame63(),
        ],
      ),
    );
  }
}

基础2

Dart 复制代码
class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(  // 添加滚动支持
        child: Stack(
          children: [
            Bg(),  // 背景在最底层
            Column(
              children: [
                TopAppBar(),
                WelcomeBanner(),
                Tabs(),
                Frame63(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Stack 组件的作用是让多个组件按层叠顺序显示,类似 Photoshop 中的图层概念。

Stack 允许子组件相互叠加,通过 Positioned 或顺序控制层级关系。在你的代码中:

  • 第一层Bg() 作为背景,占据整个屏幕
  • 第二层Column() 包含的内容(如 TopAppBarWelcomeBanner 等)显示在背景之上

基础3(增加间距)

Dart 复制代码
class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(  // 添加滚动支持
        child: Stack(
          children: [
            Bg(),  // 背景在最底层
            Column(
              children: [
                TopAppBar(),
                WelcomeBanner(),
                Tabs(),
                Frame63(),
                SizedBox(height: 55.0), // 此处的16.0表示间距大小,你可按需调整
                Headline(),
                SizedBox(height: 33.0),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

在 Flutter 中,double.infinity 是一个特殊的数值,表示无限大。它主要用于在布局中让组件尽可能地占据可用空间。不过,这个值的使用需要谨慎,因为它可能会导致布局错误。

相关推荐
张可爱12 分钟前
20251026-从网页 Console 到 Python 爬虫:一次 B 站字幕自动抓取的实践与复盘
前端·python
咖啡の猫35 分钟前
Vue中的自定义事件
前端·javascript·vue.js
yangwan1 小时前
Ubunut 22.04 安装 Docker 24.0.x
前端·后端
等风起8811 小时前
Element Plus实现TreeSelect树形选择在不同父节点下子节点有相同id的双向绑定联动
前端·javascript
摸着石头过河的石头1 小时前
跨域资源共享(CORS)完全指南:从基础概念到实际应用
前端·javascript
小胖霞1 小时前
阿里云域名解析 + Nginx 反向代理 + HTTPS 全流程:从 IP 访问到加密域名的完整配置
前端
2301_801252221 小时前
Vue中的指令
前端·javascript·vue.js
烛阴1 小时前
彻底搞懂Lua闭包
前端·lua
天***88961 小时前
Chrome扩展安装插件教程,Edge安装插件扩展教程,浏览器安装扩展程序方法
前端·chrome·edge