android - 如何在 Flutter 中创建这个布局？

Question

我正在将用 Kotlin for Android 编写的应用程序重写为 Flutter，但我正在努力在 Flutter 中重新创建布局。

看这张图片:

这是我在 Native Android 中编写的应用程序的屏幕截图。

我以某种方式在 Flutter 中重新创建了这个布局，但我在对齐方面遇到了问题。

这是我的 Flutter 应用程序的屏幕截图:

我想要文字“Jak używać？”刚开始，但我不知道该怎么做。

如果容器小部件有“子项”而不是“子项”，我就知道该怎么做。

有人可以帮我重新创建布局吗？

如果有人帮助我，我会非常高兴!

我的代码(我没有给出完整的代码，因为没有必要。):

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class HowToUse extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 16.0),
      child: Column(
        children: <Widget>[
          SvgPicture.asset('assets/icons/hamburger.svg', semanticsLabel: 'hamburger', height: 90.0,),
          SizedBox(height: 16.0),
          Text('Makdolan Flutter', style: Theme.of(context).textTheme.title),
          SizedBox(height: 16.0),
          Text('Jak używać?')
        ],
      ),
    );
  }
}

Answer 1

您需要使Text小部件宽度与屏幕宽度相同。因此，当您更改 Text 小部件内部文本的对齐方式时，您将看到差异。

尝试使用屏幕宽度的容器包装您的 Text 小部件:

Container(
     width: MediaQuery.of(context).size.width,
     child: Text('Jak używać?', textAlign: TextAlign.start,),
)

编辑:

此外，如果每个选项卡的内容是静态页面，请考虑将它们设为普通 HTML 页面，然后使用此 flutter_html 在应用程序中查看包