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

相关推荐
VincentFHR41 分钟前
Canvas 高性能K线图,支持无限左右滑动
前端·数据可视化·canvas
sophie旭1 小时前
一道面试题,开始性能优化之旅(3)-- DNS查询+TCP(二)
前端·面试·性能优化
面向星辰1 小时前
css选择器(继承补充)
前端·css
koooo~1 小时前
Vue3中的依赖注入
前端·javascript·vue.js
huuyii1 小时前
Nest 基础知识
前端
沢田纲吉1 小时前
《LLVM IR 学习手记(三):赋值表达式与错误处理的实现与解析》
前端·编程语言·llvm
sophie旭1 小时前
一道面试题,开始性能优化之旅(3)-- DNS查询+TCP(一)
前端·面试·性能优化
dora1 小时前
Flutter中dart和原生代码的通信之MethodChannel
android·flutter
IT_陈寒2 小时前
JavaScript性能优化:这7个V8引擎技巧让我的应用速度提升了50%
前端·人工智能·后端
学渣y2 小时前
nvm下载node版本,npm -v查看版本报错
前端·npm·node.js