Question

我正在使用响应屏幕，但我对响应文本小部件有一些问题。

重点是，我在2个仿真器（1.Nexus S API 28（小），2。Nexus 5（大））中测试了我的应用

在模拟器 Nexus 5 中，一切正常，但是在 Nexus S 中，我遇到了错误Bottom overflowed By 0.22222 Pixels。

我了解MediaQuery.of(context).size.width和MediaQuery.of(context).size.height，我已经将其用于布局卡。但是问题是我不知道如何在不同的屏幕中管理“大小文本”小部件（我希望在不同的屏幕中自动调整文本大小/缩放大小）。

可以帮我吗？

谢谢

这是我的代码

Widget build(BuildContext context) {
    ThemeData localTheme = Theme.of(context);
    return Container(
      padding: EdgeInsets.all(8),
      height: MediaQuery.of(context).size.height / 3,
      child: Card(
        elevation: 5,
        child: Row(
          children: <Widget>[
            Expanded(
              child: GestureDetector(
                // onTap: () => Navigator.push(
                //   context,
                //   PageTransition(
                //     type: PageTransitionType.upToDown,
                //     child: BeritaDetail(
                //       judulBerita: widget.judulBerita,
                //       isiBerita: widget.isiBerita,
                //       gambarBerita: widget.gambarBerita,
                //       tanggalKategori: widget.tanggalBerita,
                //       namaKategori: widget.namaKategori,
                //     ),
                //   ),
                // ),
                child: Container(
                  padding: EdgeInsets.all(24),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Container(
                        child: Text(
                          widget.judulBerita,
                          style: localTheme.textTheme.subhead,
                        ),
                      ),
                      Container(
                        child: Row(
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                height: 30,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Text(
                                      widget.tanggalBerita,
                                      style: localTheme.textTheme.overline,
                                    ),
                                    Text(
                                      widget.namaKategori,
                                      style: localTheme.textTheme.overline,
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            Container(
                              height: 30,
                              child: Row(
                                children: <Widget>[
                                  IconButton(
                                    icon: Icon(Icons.bookmark),
                                    onPressed: () => "",
                                  ),
                                  IconButton(
                                    icon: Icon(Icons.share),
                                    onPressed: () => "",
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Container(
              color: Colors.orange,
              width: MediaQuery.of(context).size.width / 4,
              height: double.infinity,
              child: CachedNetworkImage(
                imageUrl:
                    "${Urls.BASE_API_IMAGE}/berita/${widget.gambarBerita}",
                fit: BoxFit.fill,
                placeholder: (context, url) => CircularProgressIndicator(),
                errorWidget: (context, url, error) => Icon(Icons.error),
              ),
            )
          ],
        ),
      ),
    );
  }

Answer 1

您需要在主文件的构建器上下文中为您的应用设置文本缩放选项，例如：

return new MaterialApp(
  builder: (context, child) {
    return MediaQuery(
      child: child,
      data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
    );
  });

Answer 2

您只需要在扩展窗口小部件中包装容器图标即可。

                Expanded(
                      child:
                         Container(
                              height: 30,
                              child: Row(
                                children: [
                                  IconButton(
                                    icon: Icon(Icons.bookmark),
                                    onPressed: () => "",
                                  ),
                                  IconButton(
                                    icon: Icon(Icons.share),
                                    onPressed: () => "",
                                  ),
                                ],
                              ),
                            ),
                           ),

Flutter：使文本以不同大小响应

这是我的代码

2 个答案: