flutter - 如何将行对齐到固定位置

标签 flutter dart

我有这个List view.builder

child: ListView.builder(
              itemCount: coins.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  leading: iconsList[index],
                  title: Wrap(children: [
                    Row(children: [
                      Text(
                        coins[index],
                        style: const TextStyle(color: Colors.white),
                      ),
                      Text(
                        value[index],
                        style: TextStyle(color: Colors.white),
                      ),
                    ]),
                  ]),
                  subtitle: Align(
                    alignment: Alignment.bottomRight,
                    child: Text(
                      value[index],
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                );
              }),

在手机屏幕上显示时如下所示:

enter image description here

我想将欧元金额放在硬币找零上方的右上角,如下所示:

enter image description here

我应该如何将金额以欧元表示,以便它看起来像我显示的示例图像?

最佳答案

只需在Row下使用mainAxisAlignment: MainAxisAlignment.spaceBetweencrossAxisAlignment: CrossAxisAlignment.center,,无需使用字幕,只需绑定(bind)右侧即可带有 Column 的侧边元素并根据需要更改文本样式

ListTile(
               leading: Icon(Icons.add),
              title: Wrap(children: [
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        "coins[index]1",
                        style: const TextStyle(color: Colors.white),
                      ),
                      Column(
                        children: [
                          Text(
                            "value[index]2",
                            style: TextStyle(color: Colors.white),
                          ),
                          Text(
                            "value[index]3",
                            style: TextStyle(color: Colors.white),
                          ),
                        ],
                      )

                    ]),
              ]),

            )

输出:

enter image description here

关于flutter - 如何将行对齐到固定位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70479880/

相关文章:

arrays - 如何在 flutter 中解析json?

flutter - 滚动 Controller 未附加到任何 ScrollView (滑动器)

flutter - 如何在 Flutter 中混合多个渐变?

flutter - 如何在Flutter中更新Google驱动器文件?

dependency-injection - Angular-Dart DI 库中的工厂注入(inject)

dart - 使用不包含 MediaQuery 的上下文调用的 Flutter 错误 : MediaQuery. of()

image - Flutter:可以为参数类型 'Image Function(dynamic)'分配哪种类型的参数?

flutter - 如何在Flutter中放置这些图标?

flutter - 如何从 flutter dart 应用程序调用手机设置?

flutter - 如何从方法返回两个值