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

您应该使用EdgeInsetsDirectional类

比如使用代码

  EdgeInsetsDirectional.only(end: 8.0)

代替

  EdgeInsets.only(right: 8.0)

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