如何在颤动中创建具有多行的行

Posted 2023-02-23

【中文标题】如何在颤动中创建具有多行的行

【英文标题】：How to create row with multiple lines in flutter

【发布时间】：2021-06-12 16:18:14

【问题描述】：

我正在尝试复制一个类似于 this 的颤振设计，我能够通过使用 Listtile 小部件实现类似的效果，我唯一的问题是前导图标没有与标题垂直对齐。请问还有其他方法可以实现吗？我尝试使用行小部件，但多行文本不适合屏幕。

【问题讨论】：

请分享您的代码。

【参考方案1】：

你可以试试这个代码

Container(
                    color: Colors.white,
                    padding: const EdgeInsets.all(10),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          width: 50,
                          height: 50,
                          decoration: BoxDecoration(
                            color: Colors.blue,
                            shape: BoxShape.circle,
                          ),
                          child: Icon(
                            Icons.message,
                            color: Colors.white,
                          ),
                        ),
                        SizedBox(width: 10,),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text("Message", style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 16
                              ),),
                              Text("How to create row with multiple lines in flutter How to create row with multiple lines in flutter")
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),

结果：-

如果有效，请告诉我。

【参考方案2】：

你可以试试我的代码。

Widget ListItem(
  String imageUrl,
  String text,
  String caption,
  double imageSize = 50,
  double horizontalSpacing = 15,
  double verticalspacing = 20,
  bool showDetailIndicatorIcon = true,
  GestureTapCallback onTap,
) 
  return InkWell(
    onTap: onTap,
    child: Container(
      margin: EdgeInsets.only(top: 2),
      padding: EdgeInsets.symmetric(
          horizontal: horizontalSpacing, vertical: verticalspacing),
      child: Row(
        children: [
          ClipRRect(
            child: Image.network(
              imageUrl,
              fit: BoxFit.cover,
              height: imageSize,
              width: imageSize,
            ),
            borderRadius: BorderRadius.circular(imageSize / 2),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.symmetric(horizontal: 10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    child: Text(
                      text,
                      style: TextStyle(
                        color: ColorRes.lightWhite,
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  SizedBox(height: 5),
 
                  Text(
                    caption,
                    style: TextStyle(
                      color: ColorRes.grey,
                      fontSize: 12,
                      fontWeight: FontWeight.normal,
                    ),
                    maxLines: 3,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ),
  );

我希望它的工作。请告诉我。