行

Question

请协助创建这样的布局，在左侧创建图标，在可用空间的左侧居中放置文本。

我曾经想过每次都尝试过居中和对齐。但是我最终无济于事，例如

我尝试过的一些代码：

            Row(
//                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//                mainAxisAlignment: MainAxisAlignment.spaceBetween,
//                mainAxisAlignment: MainAxisAlignment.spaceAround,
//                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  buttonIcon,
                  Text(
                    buttonTitle,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20.0,
                      color: Colors.orange,
                    ),
                  ),
                ],
              ),

Answer 1

您可以使用ListTile小部件代替Row小部件，并获得非常相似的结果，如下所示：

ListTile(
  title: Text('NAVIGATE HERE', style: TextStyle(....// your text style)),
  leading: Icon(Icons.some_icon)
)

如果您仍然希望使用Row小部件，则可以将Expanded小部件作为其子级的一部分来实现，例如：

Row(
  children: <Widget> [
    Padding(
     padding: EdgeInsets.only(left: someValue),
     child: Icon(Icons.some_icon)
    ),
    Expanded(
     Align(
      alignment:Alignment.center,
      child: Text('NAVIGATE HERE')
     )
    )
  ]
)

Answer 2

Container(
  decoration: BoxDecoration(color: Colors.white, border: Border.all(color: color, width: 2)),
  height: 56,
  width: 300,
  child: Stack(
    children: <Widget>[
      Align(
        alignment: Alignment.centerLeft,
        child: IconButton(
          onPressed: () {},
          icon: Icon(Icons.navigation),
        ),
      ),
      Align(child: Text("NAVIGATE HERE")),
    ],
  ),
)