flutter - 如何将图标与最顶部的文本对齐

Question

考虑这个用户界面：

代码：

 Widget shopHeader(var shopName, var shopAddress){
   return Container(
                    height: 200,
                    margin: const EdgeInsets.all(10.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          padding: const EdgeInsets.all(1.0),
                          child: const Icon(Icons.home, color: Colors.black),
                          decoration: const BoxDecoration(
                            color: Colors.grey, // border color
                            shape: BoxShape.circle,
                          ),
                        ),
                        const SizedBox(
                          width: 10,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              shopName,
                              style: TextStyle(fontSize: 17),
                            ),
                            Text(
                              shopAddress,
                              style: TextStyle(fontSize: 14, color:Colors.black38),
                            ),
                             Padding(
                              padding: EdgeInsets.only(left:0.0, right:0.0, top:20.0, bottom:0.0),
                                child: SizedBox(
                                    width: 150,
                                    child: ElevatedButton(
                                      child: Text('Chat'),
                                        onPressed: () {},
                                      ))
                             )
                          ],
                        ),
                      ],
                    ),
                  );
  }

左边的图标太低了。如何设置它使其与“Awesome Shop”文本对齐？

标签： flutterflutter-layout

Answer 1

在最上面的 Row 小部件上，使用 CrossAxisAllignment 属性来 CrossAxisAllignment.start。