如何在颤振中创建多行的行

时间:2021-03-15 11:41:42

标签: android flutter dart

我正在尝试复制看起来像 this 的 Flutter 设计,我能够通过使用 Listtile 小部件实现类似的功能,我唯一的问题是前导图标没有与标题垂直对齐。请问还有其他方法可以实现吗?我尝试使用行小部件,但多行文本不适合屏幕。

2 个答案:

答案 0 :(得分:0)

你可以试试我的代码。

SELECT DATEPART(year, i.inv_date) as year,
       DATEPART(week, i.inv_date) as week,
       COUNT(DISTINCT i.id) as amount_invoices,
       SUM(p.price) as sales_total
FROM invoices i JOIN
     invoice_positions p
     ON i.id = p.invoice_id 
GROUP BY DATEPART(week, i.inv_date), DATEPART(year, i.inv_date)
ORDER BY year DESC, week DESC;

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

答案 1 :(得分:0)

你可以试试这个代码

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

结果:-

enter image description here

请让我知道它是否有效。

相关问题