首页 > 解决方案 > 如何停止在 Flutter Web 中缩小文本

问题描述

我是新手,需要了解我面临的问题。我已经使用颤振构建了一个网络应用程序。其中包含列、容器、网格视图和其他颤振小部件。

我面临的问题是,虽然当我缩小 chrome 浏览器时我的布局是响应式的,但它开始缩小内容。通常,在亚马逊等网站和其他网页中,缩小浏览器会在水平和垂直方向显示一个额外的滚动条,并且内容大小保持不变。

如何使用颤振完成相同的操作?

在此处输入图像描述

在此处输入图像描述

这是代码:

Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Flexible(
                    child: DateCard(
                        eventName: 'Code Freeze', date: DateTime.now())),
                SizedBox(width: 5),
                Flexible(
                    child: DateCard(
                        eventName: 'Switchover', date: DateTime.now())),
                SizedBox(width: 5),
                Flexible(
                    child: DateCard(eventName: 'SP GA', date: DateTime.now())),
              ],
            ),
            
            
class DateCard extends StatelessWidget {
  final String eventName;
  final DateTime date;

  const DateCard({this.eventName, this.date});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Material(
          shape: SuperellipseShape(
            borderRadius: BorderRadius.circular(28),
          ),
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 18, vertical: 3),
            child: FittedBox(
              fit: BoxFit.contain,
              child: Column(
                children: [
                  Text(
                    date.day.toString(),
                    // maxLines: 1,
                    // overflow: TextOverflow.visible,
                    style: TextStyle(
                        fontSize: SizeConfig.blockSizeHorizontal * 3,
                        letterSpacing: -1),
                  ),
                  Text(
                    DateFormat("MMM").format(date),
                    // overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontSize: SizeConfig.blockSizeHorizontal * 1.2,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        SizedBox(height: 5),
        Text(
          eventName,
          textAlign: TextAlign.center,
          style: TextStyle(color: Colors.white, fontSize: 14),
        )
      ],
    );
  }
}

标签: flutterflutter-web

解决方案


推荐阅读