You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中CarouselSlider下方文本不显示及添加分隔线问题咨询

布局参考图

问题根因
  • 自定义的buildText方法从未被加入到页面组件树中,Flutter不会主动渲染未被调用的组件方法
  • buildText内部错误嵌套了额外的Scaffold,页面已经存在顶层Scaffold,重复嵌套会导致布局异常
  • 原页面body仅直接承载CarouselSlider,没有使用垂直布局容器承载轮播下方的其他组件
  • CarouselSlider放入Column时未指定固定高度,会触发布局边界溢出报错
修正后完整实现代码

将body根布局调整为Column实现垂直排布,依次放入轮播组件、分隔线、标题文本即可:

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

class HomeScreen extends StatelessWidget {
  final List<String> imageList = [
    'https://www.matichon.co.th/wp-content/uploads/2019/07/บิ๊กป้อมพักสายตาประชุมสภา.jpg',
    'https://i.pinimg.com/474x/d8/ac/3a/d8ac3ad182334ba859ceb9f70f3a64fd.jpg',
    'https://i.pinimg.com/474x/e5/4c/06/e54c060156c18cc776b4e15da2d6d035.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: const Color.fromARGB(255, 96, 148, 44),
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.network(
                'http://www.srv.ac.th/home/wp-content/uploads/2020/08/sara-logo.png',
                fit: BoxFit.contain,
                height: 55,
                errorBuilder: (context, error, stackTrace) => const Icon(Icons.hide_image_outlined),
              ),
              const SizedBox(width: 60)
            ],
          ),
          leading: IconButton(
            icon: const Icon(Icons.menu_outlined),
            onPressed: () {},
          ),
        ),
        body: Container(
          padding: const EdgeInsets.only(top: 30),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 轮播组件
              CarouselSlider(
                options: CarouselOptions(
                  enlargeCenterPage: true,
                  enableInfiniteScroll: true,
                  autoPlay: true,
                  height: 200, // 轮播固定高度,可按需调整
                ),
                items: imageList.map((e) => ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Stack(
                      fit: StackFit.expand,
                      children: <Widget>[
                        Image.network(
                          e,
                          fit: BoxFit.cover,
                          errorBuilder: (context, error, stackTrace) =>
                              const Icon(Icons.hide_image_outlined),
                        )
                      ],
                    ))).toList(),
              ),
              // 轮播与文本的间距
              const SizedBox(height: 20),
              // 分隔线
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 16),
                child: Divider(
                  thickness: 1,
                  color: Colors.grey,
                ),
              ),
              const SizedBox(height: 16),
              // 标题文本
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 16),
                child: Text(
                  'ข่าวประชาสัมพันธ์',
                  style: TextStyle(
                    fontSize: 30,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
自定义调整说明
  • 轮播高度可直接修改CarouselOptions的height参数适配设计需求
  • 分隔线的粗细、颜色、左右边距可修改Divider组件的对应属性
  • 组件之间的留白大小可调整对应SizedBox的height参数
  • 文本样式、对齐方式、边距可直接修改Text和外层Padding的参数

内容的提问来源于stack exchange,提问作者KanG49

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.27 05:39:40