Question

很难将行小部件内的行项放置在特定的边际位置（如此图像）：

Padding(
    padding: const EdgeInsets.all(10.0),
    child: Column(
      children: <Widget>[
        values('Date', ': ${DateFormat('MMM dd, yyyy, hh:mm a').format(DateTime.parse(date))}', false),
        values('Description', ': $description', false),
      ],
    ),
  ),



Widget values(String title, String value, bool isAmount) {
    return Row(
      children: <Widget>[
        Text(
          title,
          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey),
        ),
        Spacer(),
        Text(
          value,
          style: TextStyle(
            color: isAmount ? Color(0xFF34B3C1) : Colors.black87,
          ),
        ),
        Spacer(),
      ],
    );
  }

Answer 1

使用 Expanded 和 flex 来实现这一目标，

  Widget values(String title, String value, bool isAmount) {
    return Row(
      children: <Widget>[
        Expanded(
          flex: 3,
          child: Text(
            title,
            style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey),
          ),
        ),
        Spacer(),
        Expanded(
          flex: 7,
          child: Text(
            value,
            style: TextStyle(
              color: isAmount ? Color(0xFF34B3C1) : Colors.black87,
            ),
          ),
        ),
        Spacer(),
      ],
    );
  }

Answer 2

也可以通过放置 Text（'Date'）， Text（'：'）和 Text（'Description'） ，在儿童[] 内的 Text（'：'），然后将Align设置为spaceBetween。对于Date和Description的值，您也将它们放在第一个Row（）内构建的Row（）中。

日期和：，描述和：这两个文本小部件都可以放在Container（）中

 child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.only(right: 12.0, left: 12.0),
                  decoration: new BoxDecoration(
                    border: new Border(
                      right: new BorderSide(width: 1.0, color: Colors.black26)
                    )
                  ),
                  child: Icon(Icons.person),
                ),
                Container(
                  constraints: BoxConstraints(maxWidth: 250),
                  padding: const EdgeInsets.only(left: 12.0, right: 12.0),
                  child: Text(
                    document['name'],
                    overflow: TextOverflow.ellipsis,
                  ),
                ), 
              ],
            ),
            Container(
              padding: const EdgeInsets.only(right: 12.0),
              child: Row(
                children: <Widget>[
                  Text('0'),
                  Text('/'),
                  Text(document['value'].toString())
                ],)
            )          
          ]
        ),

希望有帮助！

在列小部件内的特定位置对齐行项目

2 个答案: