flutter - 动态设置连续项目的大小

问题描述

我犯了一个错误，首先只在 iOS 上使用我的代码，然后当我去检查 Android 应用程序时，格式都搞砸了，但在 iOS 上仍然很好。

所以在小盒子里有一个容器，里面有一排包含图标和文本的容器。当我的 firebase 端更新时，它会将它变成一张卡片，它是可点击的。

我的问题是我已经在使用 AutoSizeText 并且在这种情况下它对我没有帮助，我尝试了使用布局构建器设置最大尺寸约束的解决方案，但也没有这样做。

知道如何设置它以便动态设置文本和图标大小，甚至动态设置图标大小吗？

我当前的代码如下：

class AlertWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {

return StreamBuilder<QuerySnapshot>(
    stream: FirebaseFirestore.instance
        .collection('alerts')
        .where('access',
            arrayContains: FirebaseAuth.instance.currentUser.uid)
        .where('read', isEqualTo: false)
        //.orderBy('createdAt', descending: true)
        .snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData || snapshot.data.docs.length <= 0) {
        return Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10),
                topRight: Radius.circular(10),
                bottomLeft: Radius.circular(10),
                bottomRight: Radius.circular(10)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
                offset: Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
          height: 60.0,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(width: 10.0),
              Icon(
                Icons.check_box,
                color: Colors.green,
                size: 60,
              ),
              SizedBox(width: 10.0),
              AutoSizeText(
                "No Current Messages or Alerts",
                maxLines: 1,
                maxFontSize: 20,
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              //if (snapshot.hasData) SizedBox(width: 45),
            ],
          ),
        );
      }
      Alert alert = Alert.fromFirestore(snapshot.data.docs.first);
      return Card(
        //height: 60.0,
        child: InkWell(
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SizedBox(width: 10.0),
                getIcon(snapshot),
                SizedBox(width: 15.0),
                Text(
                  "New Alert for Your Patient",
                  style:
                      TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
                //if (snapshot.hasData) SizedBox(width: 45),
                if (snapshot.hasData) Icon(Icons.arrow_right, size: 50)
              ],
            ),
            onTap: () {}),
        elevation: 12,
      );
    });

}

标签： flutterdartflutter-layout

您需要包装AutoSizeText小部件Expanded以限制文本的大小，AutoSizeText然后可以调整它的大小。

以下是一些解释：AutoSizeText

因为 Row 和 Container、Column 或 ListView 等其他小部件不约束它们的子级，所以文本会溢出。您可以通过约束 AutoSizeText 来解决此问题。在 Row 和 Column 的情况下使用 Expanded 包裹它，或者使用 SizedBox 或其他具有固定宽度（和高度）的小部件。

 AutoSizeText(
     "No Current Messages or Alerts",
     maxLines: 1,
     maxFontSize: 20,
     style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),

应更改为：

Expanded(
    child:
        AutoSizeText(
           "No Current Messages or Alerts",
           maxLines: 1,
           maxFontSize: 20,
           style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
    ),

flutter - 动态设置连续项目的大小

问题描述

解决方案

推荐阅读