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

Posted 2021-04-20

我的扑动应用程序具有对阿拉伯语的RTL（本地化）支持。我有一个flutter的屏幕，它在一个列小部件里面有一个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代码中有什么问题吗？

答案

你应该使用类EdgeInsetsDirectional

比如使用代码

  EdgeInsetsDirectional.only(end: 8.0)

代替

  EdgeInsets.only(right: 8.0)

顺便说一句，你也应该使用AlignmentDirectional而不是Alignment

另一答案

通过从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，