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