如何使文本位于左侧?Flutter and Dart

wooyq4lh  于 2023-01-15  发布在  Flutter
关注(0)|答案(2)|浏览(160)

如何将文本"您的结果"和"您最有可能是$result"显示在页面左侧?
下面是我的代码:

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(220, 255, 255, 255),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const Text(
              "Your Result",
              style: TextStyle(
                  fontFamily: 'DM Sans Regular',
                  fontSize: 36,
                  fontWeight: FontWeight.bold),
              textAlign: TextAlign.left,
            ),
            const SizedBox(height: 16),
            Text("You are most likely $result"),
            const SizedBox(height: 16),
            SizedBox(
              width: 326,
              height: 326,
              child: Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(40),
                  //set border radius more than 50% of height and width to make circle
                ),
                child: Center(
                  child: Text(
                    "$score / ${questionList.length}",
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                        fontFamily: 'DM Sans Regular',
                        fontSize: 48,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 16),
            const Text(
              "Please consult with your specialist for\nconfirmation",
              style: TextStyle(
                fontFamily: 'DM Sans Regular',
                fontSize: 16,
                fontWeight: FontWeight.bold,
                overflow: TextOverflow.ellipsis,
              ),
              maxLines: 2,
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 100),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 50),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[...],
              ),
            )
          ],
        ),
      ),
    );
  }

这是代码The output is looking like this的输出
这就是我希望它看起来像Actually I want it to be looking like this的设计

hs1ihplo

hs1ihplo1#

我正在浏览您的代码,我发现了2个问题的解决方案,我发现的第一个是将柱的横轴对齐更改为:crossAxisAlignment: CrossAxisAlignment.stretch,但是这个解决方案有一个问题,这会弄乱你当前的布局,所以你需要使用填充来修复所有的布局。我找到的第二个,也是我认为最好的一个,是将每个文本 Package 在一行中,这样行就会按照你的意愿将文本定位在屏幕的左侧,你甚至可以添加一些填充来达到你在最终设计中展示的效果:

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: const Color.fromARGB(220, 255, 255, 255),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Row(
          children: [
            const Text(
              "Your Result",
              style: TextStyle(
                  fontFamily: 'DM Sans Regular',
                  fontSize: 36,
                  fontWeight: FontWeight.bold),
              textAlign: TextAlign.left,
            ),
          ],
        ),
        const SizedBox(height: 16),
        Row(
          children: [
            Text("You are most likely $result"),
          ],
        ),
        const SizedBox(height: 16),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [],
        ),
        const SizedBox(height: 16),
        SizedBox(
          width: 326,
          height: 326,
          child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(40),
              //set border radius more than 50% of height and width to make circle
            ),
            child: Center(
              child: Text(
                "$score / ${questionList.length}",
                textAlign: TextAlign.center,
                style: const TextStyle(
                    fontFamily: 'DM Sans Regular',
                    fontSize: 48,
                    fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ),
        const SizedBox(height: 16),
        const Text(
          "Please consult with your specialist for\nconfirmation",
          style: TextStyle(
            fontFamily: 'DM Sans Regular',
            fontSize: 16,
            fontWeight: FontWeight.bold,
            overflow: TextOverflow.ellipsis,
          ),
          maxLines: 2,
          textAlign: TextAlign.center,
        ),
        const SizedBox(height: 100),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 50),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[],
          ),
        )
      ],
    ),
  ),
);

}

l7mqbcuq

l7mqbcuq2#

Text小工具 Package 为align并设置alignment:Alignment.topLeft,
像这样,

Align (
              alignment:Alignment.topLeft,
              child: const 
              Text(
                "Your Result",
                style: TextStyle(
                    fontFamily: 'DM Sans Regular',
                    fontSize: 36,
                    fontWeight: FontWeight.bold),
                textAlign: TextAlign.left,
              ),
            ),

完整代码:

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(220, 255, 255, 255),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Align (
              alignment:Alignment.topLeft,
              child: const 
              Text(
                "Your Result",
                style: TextStyle(
                    fontFamily: 'DM Sans Regular',
                    fontSize: 36,
                    fontWeight: FontWeight.bold),
                textAlign: TextAlign.left,
              ),
            ),
            const SizedBox(height: 16),
            Align (
              alignment:Alignment.topLeft,
              child:Text("You are most likely $result"),),
            const SizedBox(height: 16),
            SizedBox(
              width: 326,
              height: 326,
              child: Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(40),
                  //set border radius more than 50% of height and width to make circle
                ),
                child: Center(
                  child: Text(
                    "$score / ${questionList.length}",
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                        fontFamily: 'DM Sans Regular',
                        fontSize: 48,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 16),
            const Text(
              "Please consult with your specialist for\nconfirmation",
              style: TextStyle(
                fontFamily: 'DM Sans Regular',
                fontSize: 16,
                fontWeight: FontWeight.bold,
                overflow: TextOverflow.ellipsis,
              ),
              maxLines: 2,
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 100),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 50),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[...],
              ),
            )
          ],
        ),
      ),
    );
  }

相关问题