如何在帶有值顫動的文本字串中精確“：”

#flutter 用戶界面，

例如像這些

name : Yogi A W
company : PT XXX
company second : PT XXXX

我想在 UI Flutter 上實作精確的“變數：值”

預期的

name           : Yogi A W
company        : PT XXX
company second : PT XXXX

現實

name           : Yogi A W
company        : PT XXX
company second  : PT XXXX

我\t在Text小部件中使用過

Text('Nama\t\t\t\t\t\t\t\t\t\t\t\t:'),
Text('Company\t\t\t\t\t\t\t\t\t\t\:'),
Text('Company second\t\t:'),

uj5u.com熱心網友回復：

你可以試試這個代碼

Row(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text("Name"),
              Text("Company"),
              Text("Company Second"),
            ],
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(" : Yogi A W"),
              Text(" : PT ABC"),
              Text(" : PT CDE"),
            ],
          ),
        ],
      )

uj5u.com熱心網友回復：

您可以使用Table小部件

Table(
      defaultVerticalAlignment: TableCellVerticalAlignment.middle,      
      children: <TableRow>[
        TableRow(
          children: <Widget>[
            
            TableCell(
              
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text("name"),
            ),
            TableCell(
              
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text(":"),
            ),
            TableCell(
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text("Yogi A W"),
            ),
          ],
        ),
        TableRow(
          children: <Widget>[
            
            TableCell(
              
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text("company"),
            ),
            TableCell(
              
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text(":"),
            ),
            TableCell(
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text("PT XXX"),
            ),
          ],
        ),
        TableRow(
          children: <Widget>[
            
            TableCell(
              
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text("company second"),
            ),
            TableCell(
              
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text(":"),
            ),
            TableCell(
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text("PT XXXX"),
            ),
          ],
        ),
      ],
    );

uj5u.com熱心網友回復：

與@Arzak 相同，但為您添加重構

@override
  Widget build(BuildContext context) {
    const map = {
      'Name': 'Boxing',
      'Company': 'Apple',
      'Company second': 'Google',
    };

    return Scaffold(
      appBar: AppBar(
        title: Text('test screen'),
      ),
      body: Row(
        children: [
          _data(map.keys),
          _data(map.values, isValue: true),
        ],
      ),
    );
  }

  Widget _data(Iterable<String> list, {bool isValue = false}) {
    return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: list.map((e) => Text(isValue ? ': $e' : '$e\t')).toList());
  }

標籤：扑

上一篇：我可以從dart的子小部件中的父小部件訪問變數嗎？

下一篇：請幫我制作縮放css影片？