Flutter Android 模拟器中的文本溢出，在 IOS 模拟器中工作正常

Question

我有一个 Column 小部件，它有 2 个孩子：一个 SizedBox 和一个带有 Text 小部件的容器。 我在 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),
              ),
            ],
          ),
        ],
      ),

Answer 1

将 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),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            );
          }),
    );
  }

Answer 2

使用定位放置文本：

  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),
              ),
          ),
        ],
      ),

Answer 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),
              ),
            ],
          ),