如何以最佳方式在图标下实现动态文本

时间:2019-06-02 11:33:56

标签: flutter dart flutter-layout

我正在尝试在Icons中实现2个Row,并在每个Icon下实现一些文字

我当前的实现方式:

   ButtonBar(
                        alignment: MainAxisAlignment.spaceAround,
                        children: <Widget>[
                          IconButton(
                            icon: Icon(
                              Icons.directions_car,
                              size: 55.0,
                            ),
                            onPressed: () {},
                          ),
                          IconButton(
                            icon: Icon(
                              Icons.streetview,
                              size: 55.0,
                            ),
                            onPressed: () {},
                          ),
                        ],
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(18.0, 10.0, 0, 0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: <Widget>[
                            Text('some text',
                            style: TextStyle(
                              fontSize: 16.0
                            ),
                            ), 
                            Text('some text'),
                            ],
                        ),
                      ),

我的问题是我的文字应该是动态的,因此每次更改文字时,文字的位置都会更改,有时看起来真的很丑。

如何更好地在此处张贴文本?

1 个答案:

答案 0 :(得分:1)

尝试一下..所以我要做的是我在列内添加了图标和文本,以便它们表现为一个组

    ButtonBar(
            alignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Column(
                children: <Widget>[
                  IconButton(
                    padding: EdgeInsets.zero,
                    icon: Icon(
                      Icons.directions_car,
                      size: 55.0,
                    ),
                    onPressed: () {},
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text('some text'),
                ],
              ),
              Column(
                children: <Widget>[
                  IconButton(
                    padding: EdgeInsets.zero,
                    icon: Icon(
                      Icons.streetview,
                      size: 55.0,
                    ),
                    onPressed: () {},
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text('some text'),
                ],
              ),
            ],
          ),