Flutter RTL（本地化）不适用于网格视图小部件 - 阿拉伯语

Question

我的 flutter 应用程序支持阿拉伯语的 RTL（本地化）。我有一个颤动的屏幕，它在列小部件内有一个 GridView 小部件。它显示的数据对于英语来说绝对没问题，但当我切换到阿拉伯语时则完全没有。以下为截图

当语言为英语时：

当语言切换为阿拉伯语时

我的代码是：

class TransactionSummary extends StatelessWidget {
  final String name;
  final String settlementDate;
  final int transactionCount;
  final String credit;
  final String debit;
  final String discount;

  TransactionSummary(
      {this.name,
      this.settlementDate,
      this.transactionCount,
      this.credit,
      this.debit,
      this.discount});

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final TextTheme textTheme = theme.textTheme.copyWith(
        title: theme.textTheme.title.copyWith(
            fontSize: 18.0,
            color: kMaximusBlue900,
            fontWeight: FontWeight.w600),
        subhead: theme.textTheme.subhead
            .copyWith(color: Colors.black, fontSize: 16.0),
        caption: theme.textTheme.caption
            .copyWith(color: theme.hintColor, fontSize: 14.0));

return Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.only(left: 24.0),
          child: Text(
            '$name',
            style: textTheme.title,
          ),
        ),
        Container(
          child: Padding(
            padding: const EdgeInsets.only(right: 8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  '$settlementDate',
                  style: TextStyle(fontSize: 12.0),
                ),
                Text(Translations.of(context).settlementDate,
                    style:
                        TextStyle(color: theme.hintColor, fontSize: 10.0)),
              ],
            ),
          ),
        ),
      ],
    ),
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: Divider(
        color: Colors.grey,
        height: 2.0,
      ),
    ),
    IgnorePointer(
        child: GridView.count(
      padding: EdgeInsets.only(left: 24.0),
      shrinkWrap: true,
      crossAxisCount: 2,
      childAspectRatio: 2.5,
      mainAxisSpacing: 10.0,
      crossAxisSpacing: 50.0,
      children: [
        buildGridViewCell(transactionCount.toString(),
            Translations.of(context).transactions, textTheme),
        buildGridViewCell(
            discount, Translations.of(context).discount, textTheme),
        buildGridViewCell(
            debit, Translations.of(context).debit, textTheme),
        buildGridViewCell(
            credit, Translations.of(context).credit, textTheme),
      ],
    ))
  ],
);


 }

  Widget buildGridViewCell(String data, String caption, TextTheme textTheme) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          data,
          style: textTheme.subhead,
        ),
        Text(caption, style: textTheme.caption),
      ],
    );
  }
}

GridView 代码有问题吗？

Answer 1

这已通过从 Right 提供等效填充来解决，

`

return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(left: 24.0,right: 24.0),
            child: Text(
              '$name',
              style: textTheme.title,
            ),
          ),
          Container(
            child: Padding(
              padding: const EdgeInsets.only(right: 8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    '$settlementDate',
                    style: TextStyle(fontSize: 12.0),
                  ),
                  Text(Translations.of(context).settlementDate,
                      style:
                          TextStyle(color: theme.hintColor, fontSize: 10.0)),
                ],
              ),
            ),
          ),
        ],
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Divider(
          color: Colors.grey,
          height: 2.0,
        ),
      ),
      IgnorePointer(
          child: GridView.count(
        padding: EdgeInsets.only(left: 24.0,right: 24.0),
        shrinkWrap: true,
        crossAxisCount: 2,
        childAspectRatio: 2.5,
        children: [
          buildGridViewCell(transactionCount.toString(),
              Translations.of(context).transactions, textTheme),
          buildGridViewCell(
              discount, Translations.of(context).discount, textTheme),
          buildGridViewCell(
              debit, Translations.of(context).debit, textTheme),
          buildGridViewCell(
              credit, Translations.of(context).credit, textTheme),
        ],
      ))
    ],
  );
}

Widget buildGridViewCell(String data, String caption, TextTheme textTheme) {
  return Wrap(
    direction: Axis.vertical,
    children: <Widget>[
      Text(
        data,
        style: textTheme.subhead,
      ),
      Text(caption, style: textTheme.caption),
    ],
  );
}
}

`

另外，我不得不删除 mainAxisSpacing: 10.0, crossAxisSpacing：50.0，

Answer 2

你应该使用 class EdgeInsetsDirectional

如使用代码

  EdgeInsetsDirectional.only(end: 8.0)

代替

  EdgeInsets.only(right: 8.0)

顺便说一下，您还应该使用 AlignmentDirectional 来代替 Alignment

Flutter RTL（本地化）不适用于网格视图小部件 - 阿拉伯语

Flutter RTL (localization) not working for grid view widget - arabic language

gridview

localization

arabic

arabic-support

flutter