时间戳

首页 > 解决方案 > Flutter (\t) 字符串值对齐问题

flutter - Flutter (\t) 字符串值对齐问题

问题描述

我需要在颤振小部件中显示以下地图数据。

Map<String, String> map1 = {
    "1335": "\t     \tE      \t     \t          \t",
    "1336": "\t     \tEG     \t     \t          \t",
    "1337": "\t     \tEFG    \t     \t          \t",
    "1338": "\t     \tEFG    \t     \t          \t",
    "1339": "\t     \tADEFGH \t     \t          \t",
    "1340": "\t     \tADEGHI \t     \t          \t",
    "1341": "\t     \tADEGHI \t     \t          \t",
    "1342": "\t     \tADHIJLM\t     \t          \tK",
    "1343": "\t     \tADIJKL \t     \tI         \tK",
    "1344": "\t     \tBCDJKL \t     \tBCFGIJK   \tK",
    "1345": "\t     \tBCK    \t     \tABCEFGHIJK\tK",
    "1346": "\t     \tK      \tA    \tABCDEHIJK \tJKL",
    "1347": "\t     \t       \tA    \tADEIK     \tJKL",
    "1348": "\t     \t       \tAB   \tADK       \tJKL",
    "1349": "\t     \t       \tBD   \tAK        \tJL",
    "1350": "\t     \t       \tCDGH \tAK        \tJL",
    "1351": "\t     \t       \tDEFGH\tAKL       \tJLM",
    "1352": "\t     \t       \tEFI  \tLM        \tAJLM",
    "1353": "\t     \t       \tI    \tL         \tAJ",
    "1354": "\t     \t       \tIJ   \t          \tAIJ",
    "1355": "\t     \t       \tJL   \t          \tAEIJ",
    "1356": "\t     \t       \tJKLM \t          \tABEFIJ",
    "1357": "\t     \t       \tKLM  \t          \tABCDEFGHI",
    "1358": "\t     \t       \t     \t          \tCDGH",
    "1359": "\t     \t       \t     \t          \tG",
    "1360.0": "\t08/20\t09/20  \t10/20\t11/20     \t12/20"
  };

我已经使用垂直方向的 Wrap 小部件来呈现这些数据。

return Wrap(
      runSpacing: 30,
      spacing: 2.0,
      direction: Axis.vertical,
      alignment: WrapAlignment.start,
      crossAxisAlignment: WrapCrossAlignment.start,
      children: map1.entries
          .map(
            (e) => Text(
              e.key + ':' + e.value,
              textAlign: TextAlign.right,
              textScaleFactor: 1,
              style: TextStyle(
                fontSize: 12,
                wordSpacing: 5,
              ),
            ),
          )
          .toList(),
    );

输出

A 到 M 个字符与前一行数据重叠。请帮助某人解决此问题。

标签： flutterflutter-layout

解决方案

请查看以下代码。我使用 Table 而不是 Wrap，因为它提供了更多控制权。您可以直接在DartPad上运行代码https://dartpad.dev/272875acceeac3a6af5eceb8f65383fa

import 'dart:ui';

import 'package:flutter/material.dart';

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter Demo")),
        body: Center(child: MyWidget()),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Map<String, String> map1 = {
      "1335": "\t     \tE      \t     \t          \t",
      "1336": "\t     \tEG     \t     \t          \t",
      "1337": "\t     \tEFG    \t     \t          \t",
      "1338": "\t     \tEFG    \t     \t          \t",
      "1339": "\t     \tADEFGH \t     \t          \t",
      "1340": "\t     \tADEGHI \t     \t          \t",
      "1341": "\t     \tADEGHI \t     \t          \t",
      "1342": "\t     \tADHIJLM\t     \t          \tK",
      "1343": "\t     \tADIJKL \t     \tI         \tK",
      "1344": "\t     \tBCDJKL \t     \tBCFGIJK   \tK",
      "1345": "\t     \tBCK    \t     \tABCEFGHIJK\tK",
      "1346": "\t     \tK      \tA    \tABCDEHIJK \tJKL",
      "1347": "\t     \t       \tA    \tADEIK     \tJKL",
      "1348": "\t     \t       \tAB   \tADK       \tJKL",
      "1349": "\t     \t       \tBD   \tAK        \tJL",
      "1350": "\t     \t       \tCDGH \tAK        \tJL",
      "1351": "\t     \t       \tDEFGH\tAKL       \tJLM",
      "1352": "\t     \t       \tEFI  \tLM        \tAJLM",
      "1353": "\t     \t       \tI    \tL         \tAJ",
      "1354": "\t     \t       \tIJ   \t          \tAIJ",
      "1355": "\t     \t       \tJL   \t          \tAEIJ",
      "1356": "\t     \t       \tJKLM \t          \tABEFIJ",
      "1357": "\t     \t       \tKLM  \t          \tABCDEFGHI",
      "1358": "\t     \t       \t     \t          \tCDGH",
      "1359": "\t     \t       \t     \t          \tG",
      "1360.0": "\t08/20\t09/20  \t10/20\t11/20     \t12/20"
    };

    final List<TableRow> children = (map1.entries.toList().reversed.map((e) {
      return TableRow(children: [
        TableCell(child: Text(e.key)),
        ...e.value
            .split("\t")
            .map(
              (e) => TableCell(
                child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 3),
                    child: Text(
                      e.replaceAll(" ", ""),
                      textScaleFactor: 1,
                      style: const TextStyle(
                          fontSize: 12,
                          wordSpacing: 5,
                          fontFeatures: [FontFeature.tabularFigures()]),
                    )),
              ),
            )
            .toList()
      ]);
    }).toList());

    return ListView(
      scrollDirection: Axis.horizontal,
      children: [
        Table(
          defaultColumnWidth: const IntrinsicColumnWidth(),
          children: children,
        ),
      ],
    );
  }
}

推荐阅读