Android 模拟器中的 Flutter 文本溢出，在 IOS 模拟器中运行良好答案

【问题标题】：Flutter text overflow in Android emulator, works fine in IOS emulatorAndroid 模拟器中的 Flutter 文本溢出，在 IOS 模拟器中运行良好
【发布时间】：2021-11-19 07:54:18
【问题描述】：

我有一个 Column 小部件，它有 2 个孩子：一个 SizedBox 和一个带有 Text 小部件的 Container。我在 iOS 模拟器中出现溢出，但它在 Android 上呈现没有问题。我应该使用 MediaQuery 根据设备类型自定义 SizedBox 高度吗？（注意：包含 Scaffold/Stack 代码只是为了提供更多上下文，并且可能与溢出问题无关，除非我弄错了！）

  Widget build(BuildContext context) {
  return new Scaffold(
    body: new Swiper(
    itemBuilder: (BuildContext context, int index) {
     return GestureDetector(
      onVerticalDragStart: (details) {
            /* do something */
            ));
      },
      child: Stack(
        children: [
          ShaderMask(
            shaderCallback: (Rect bounds) {
              return LinearGradient(
                      begin: Alignment.bottomCenter,
                      end: Alignment.center,
                      colors: [Colors.black12, Colors.white])
                  .createShader(bounds);
            },
            child: Container(
              padding:
                  new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
              decoration: new BoxDecoration(
                image: new DecorationImage(
                  image: new AssetImage(tipList[index].imagePath),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          Column(
            children: [
              new SizedBox(height: 700),
              Container(
                padding: new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
                child: new Text(tipList[index].description,
                    style: Theme.of(context).textTheme.headline4),
              ),
            ],
          ),
        ],
      ),

【问题讨论】：

标签： android flutter

【解决方案1】：

使用定位放置您的文本：

  Widget build(BuildContext context) {
  return new Scaffold(
    body: new Swiper(
    itemBuilder: (BuildContext context, int index) {
     return GestureDetector(
      onVerticalDragStart: (details) {
            /* do something */
            ));
      },
      child: Stack(
        children: [
          ShaderMask(
            shaderCallback: (Rect bounds) {
              return LinearGradient(
                      begin: Alignment.bottomCenter,
                      end: Alignment.center,
                      colors: [Colors.black12, Colors.white])
                  .createShader(bounds);
            },
            child: Container(
              padding:
                  new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
              decoration: new BoxDecoration(
                image: new DecorationImage(
                  image: new AssetImage(tipList[index].imagePath),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          Positioned(
            bottom: 0.0,
            child:
              Container(
                padding: new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
                child: new Text(tipList[index].description,
                    style: Theme.of(context).textTheme.headline4),
              ),
          ),
        ],
      ),

【讨论】：

工作，有一个小的补充：我在位置设置左右约束，否则它会忽略容器右/左填充和文本滚出屏幕。

【解决方案2】：

将 FittedBox 与 BoxFit.scaleDown 一起使用，我会更新您的代码。

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: Swiper(
          itemCount: tipList.length,
          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              onVerticalDragStart: (details) {},
              child: Stack(
                children: [
                  ShaderMask(
                    shaderCallback: (Rect bounds) {
                      return const LinearGradient(
                              begin: Alignment.bottomCenter,
                              end: Alignment.center,
                              colors: [Colors.black12, Colors.white])
                          .createShader(bounds);
                    },
                    child: Container(
                      padding: const EdgeInsets.only(
                          left: 16.0, bottom: 8.0, right: 16.0),
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage(tipList[index].imagePath),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
                  Column(
                    children: [
                      const SizedBox(height: 700),
                      Padding(
                        padding: const EdgeInsets.only(
                            left: 16.0, bottom: 8.0, right: 16.0),
                        child: FittedBox(
                          fit: BoxFit.scaleDown,
                          child: Text(tipList[index].description,
                              style: Theme.of(context).textTheme.headline4),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            );
          }),
    );
  }

【讨论】：

这行得通，但是由于“缩小”效果，当用户滑动时，轮播中的每个图像都会出现不同大小的标题（取决于标题的长度）。

【解决方案3】：

这是因为这两个屏幕的高度不同。为了使其 UI 响应，您应该避免使用具有精确高度的 SizedBox 或容器，并使用 Expanded/Spacer 小部件。这两个小部件都将占用该特定设备屏幕上的最大可用空间。所以我会先试试这个：


   Column(
            children: [
              Spacer(), //or Expanded(child:Container()),
              Container(
                padding: new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
                child: new Text(tipList[index].description,
                    style: Theme.of(context).textTheme.headline4),
              ),
            ],
          ),

【讨论】：

Spacer 和 Expanded 都不起作用，文本显示在屏幕顶部。