Flutter基础（前端教程④-组件拼接）

0wioiw02025-07-09 17:44

基础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() 包含的内容（如 TopAppBar、WelcomeBanner 等）显示在背景之上

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