如何在 Flutter 中定位这些图标？答案

【问题标题】：How to position these icons in Flutter?如何在 Flutter 中定位这些图标？
【发布时间】：2019-09-27 04:14:18
【问题描述】：

我正在尝试从 Gmail 重新创建布局，但我不知道如何在布局中放置图标。

这是我希望这些图标看起来如何的图像：

这是我在 Flutter 中所做的图像：

我希望图标之间有一个空格，并且我希望它们与“麦当劳波兰”处于同一高度。

有没有人可以帮助我？

代码：

import 'package:flutter/material.dart';

class GeneratedMailCouponScreen extends StatelessWidget {
  final String couponImage;

  GeneratedMailCouponScreen({Key key, @required this.couponImage}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Icon(
                        Icons.arrow_back
                      )
                    ],
                  ),
                  Row(
                    children: [
                      Icon(
                        Icons.archive
                      ),
                      SizedBox(width: 5.0),
                      Icon(
                        Icons.delete
                      ),
                      SizedBox(width: 5.0),
                      Icon(
                        Icons.mail
                      ),
                      SizedBox(width: 5.0),
                      Icon(
                        Icons.more_vert
                      )
                    ],
                  )
                ],
              ),
              SizedBox(height: 16.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Text('Voucher', style: TextStyle(color: Colors.black, fontSize: 18.0)),
                      SizedBox(width: 8.0),
                      Container(
                        color: Colors.grey[200],
                        child: Padding(
                          padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
                          child: Text('Odebrane', style: TextStyle(color: Colors.black, fontSize: 12.0),),
                        ),
                      )
                    ],
                  ),
                  Row(
                    children: [
                      Icon(
                        Icons.star_border
                      )
                    ],
                  )
                ],
              ),
              SizedBox(height: 16.0),
              Row(
                children: [
                  Container(
                    height: 45.0,
                    width: 45.0,
                    decoration: BoxDecoration(
                      color: Colors.blue[100],
                      shape: BoxShape.circle
                    ),
                    child: Center(
                      child: Text('M', style: TextStyle(fontSize: 20.0),),
                    )
                  ),
                  Row(
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Text('McDonalds Poland', style: TextStyle(color: Colors.black)),
                              SizedBox(width: 8.0),
                              Text('Wczoraj', style: TextStyle(color: Colors.grey))
                            ],
                          ),
                          Row(
                            children: [
                              Text('do mnie', style: TextStyle(color: Colors.grey)),
                              Icon(
                                Icons.expand_more
                              )
                            ],
                          )
                        ],
                      ),
                      Row(
                        children: [
                          Icon(
                            Icons.reply
                          ),
                          Icon(
                            Icons.more_vert
                          )
                        ],
                      )
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

我对你的代码做了一些修改，请检查它是否适合你

import 'package:flutter/material.dart';

class GeneratedMailCouponScreen extends StatelessWidget {
  final String couponImage;

      GeneratedMailCouponScreen({Key key, @required this.couponImage})
  : super(key: key);

  @override
  Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.white,
  body: SafeArea(
    child: Container(
      padding: EdgeInsets.all(16.0),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [Icon(Icons.arrow_back)],
              ),
              Row(
                children: [
                  Icon(Icons.archive),
                  SizedBox(width: 5.0),
                  Icon(Icons.delete),
                  SizedBox(width: 5.0),
                  Icon(Icons.mail),
                  SizedBox(width: 5.0),
                  Icon(Icons.more_vert)
                ],
              )
            ],
          ),
          SizedBox(height: 16.0),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Text(
                    'Voucher',
                    style: TextStyle(color: Colors.black, fontSize: 18.0),
                  ),
                  SizedBox(width: 8.0),
                  Container(
                    color: Colors.grey[200],
                    child: Padding(
                      padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
                      child: Text(
                        'Odebrane',
                        style:
                            TextStyle(color: Colors.black, fontSize: 12.0),
                      ),
                    ),
                  )
                ],
              ),
              Row(
                children: [Icon(Icons.star_border)],
              )
            ],
          ),
          SizedBox(height: 16.0),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                height: 45.0,
                width: 45.0,
                decoration: BoxDecoration(
                    color: Colors.blue[100], shape: BoxShape.circle),
                child: Center(
                  child: Text(
                    'M',
                    style: TextStyle(fontSize: 20.0),
                  ),
                ),
              ),
              SizedBox(width: 10),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Text(
                        'McDonalds Poland',
                        style: TextStyle(color: Colors.black),
                      ),
                      SizedBox(width: 8.0),
                      Text(
                        'Wczoraj',
                        style: TextStyle(color: Colors.grey),
                      )
                    ],
                  ),
                  Row(
                    children: [
                      Text('do mnie',
                          style: TextStyle(color: Colors.grey)),
                      Icon(Icons.expand_more)
                    ],
                  )
                ],
              ),
              Spacer(flex: 1,),
              Row(
                children: [Icon(Icons.reply), Icon(Icons.more_vert)],
              )
            ],
          )
        ],
      ),
        ),
      ),
    );
  }
}

【讨论】：

是的，它有效，但我希望这些图标与“McDonalds Poland”文本处于同一高度。你知道怎么做吗？
是的，我们可以使用 Stack 和 Positioned 小部件来做到这一点，但如果您在 Gmail 应用中签入，那么这些图标会位于中间。

【解决方案2】：

我做了一些改变。现在这些图标的高度与文本高度相同，我希望对你有用

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [Icon(Icons.arrow_back)],
                  ),
                  Row(
                    children: [
                      Icon(Icons.archive),
                      SizedBox(width: 5.0),
                      Icon(Icons.delete),
                      SizedBox(width: 5.0),
                      Icon(Icons.mail),
                      SizedBox(width: 5.0),
                      Icon(Icons.more_vert)
                    ],
                  )
                ],
              ),
              SizedBox(height: 16.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Text('Voucher',
                          style:
                              TextStyle(color: Colors.black, fontSize: 18.0)),
                      SizedBox(width: 8.0),
                      Container(
                        color: Colors.grey[200],
                        child: Padding(
                          padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
                          child: Text(
                            'Odebrane',
                            style:
                                TextStyle(color: Colors.black, fontSize: 12.0),
                          ),
                        ),
                      )
                    ],
                  ),
                  Row(
                    children: [Icon(Icons.star_border)],
                  )
                ],
              ),
              SizedBox(height: 16.0),
              Container(
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Container(
                        height: 45.0,
                        width: 45.0,
                        decoration: BoxDecoration(
                            color: Colors.blue[100], shape: BoxShape.circle),
                        child: Center(
                          child: Text(
                            'M',
                            style: TextStyle(fontSize: 20.0),
                          ),
                        )),
                    SizedBox(
                      width: 16,
                    ),
                    Expanded(
                      child: Container(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Container(
                                    child: Row(
                                      children: <Widget>[
                                        Text('McDonalds Poland',
                                            style:
                                                TextStyle(color: Colors.black)),
                                        SizedBox(width: 8.0),
                                        Text('Wczoraj',
                                            style:
                                                TextStyle(color: Colors.grey)),
                                      ],
                                    ),
                                  ),
                                  Container(
                                    child: Row(
                                      children: <Widget>[
                                        Icon(Icons.reply),
                                        Icon(Icons.more_vert)
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            ),
                            Container(
                              child: Row(
                                children: [
                                  Text('do mnie',
                                      style: TextStyle(color: Colors.grey)),
                                  Icon(Icons.expand_more)
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

【讨论】：

【解决方案3】：

这是工作！您必须将“M”Container 放在 Row 中，并将图标放在 Container 中

return Scaffold(
      body: Container(
          padding: EdgeInsets.only(top: 50),
          child: new Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Row(
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.end,
                  children: [                    
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Container(
                        height: 45.0,
                        width: 45.0,
                        decoration: BoxDecoration(
                            color: Colors.blue[100], shape: BoxShape.circle),
                        child: Center(
                          child: Text(
                            'M',
                            style: TextStyle(fontSize: 20.0),
                          ),
                        )),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                Text('McDonalds Poland',
                                    style: TextStyle(color: Colors.black)),
                                SizedBox(width: 8.0),
                                Text('Wczoraj',
                                    style: TextStyle(color: Colors.grey))
                              ],
                            ),
                            Row(
                              children: [
                                Text('do mnie',
                                    style: TextStyle(color: Colors.grey)),
                                Icon(Icons.expand_more)
                              ],
                            )
                          ],
                        ),                        
                      ],
                    ),
                    Container(
                          padding: EdgeInsets.only(top: 50),
                          child: Row(
                            children: [
                              Icon(Icons.reply),
                              Icon(Icons.more_vert)
                            ],
                          ),
                        )
                  ],
                )
              ])),
    );

【讨论】：