将”Text”下面放置”TextButton”的方法如下:

huangapple go评论63阅读模式
英文:

How can I leave textButton below the Text

问题

I'm doing a project on Flutter. I'm having a hard time making this button, I'll leave the photo and the code.

Positioned(
  bottom: -50,
  child: Container(
    width: 281,
    height: 111,
    decoration: BoxDecoration(
      color: orangeDetails.withOpacity(0.8),
      borderRadius: BorderRadius.circular(9),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.1),
          spreadRadius: 3,
          blurRadius: 4,
          offset: Offset(0, 2),
        ),
      ],
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Image.asset(
          "assets/images/metro.png",
          width: 100,
        ),
        Align(
          alignment: Alignment.center,
          child: Text(
            "Acompanhe a rotas das linhas \n e estações do metrô \n de Recife",
            style: TextStyle(
              color: Colors.white,
              fontSize: 12,
              fontWeight: FontWeight.w700,
            ),
          ),
        ),
        // TextButton(
        //   onPressed: (){},
        //   child: Text("VER LINHAS"),
        //   style: ButtonStyle(
        //       foregroundColor: MaterialStateProperty.all(Colors.black),
        //       backgroundColor:MaterialStateProperty.all(blueDetails),
        //       fixedSize: MaterialStateProperty.all(const Size(95, 5)),
        //       shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        //           RoundedRectangleBorder(
        //             borderRadius: BorderRadius.circular(3),
        //           )
        //       )
        //   ),
        // ),
      ],
    ),
  ),
);

How can I increment this TextButton in the photo? Please, can someone help me?

英文:

I'm doing a project on Flutter. I'm having a hard time making this button, I'll leave the photo and the code.enter image description here

Positioned(
        bottom: -50,
        child: Container(
          width: 281,
          height: 111,
          decoration: BoxDecoration(
            color: orangeDetails.withOpacity(0.8),
            borderRadius: BorderRadius.circular(9),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.1),
                spreadRadius: 3,
                blurRadius: 4,
                offset: Offset(0, 2) // muda a posi&#231;&#227;o da sombra
              ),
            ],
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Image.asset(
                  &quot;assets/images/metro.png&quot;,
                  width: 100,
              ),
              Align(
                alignment: Alignment.center,
                child: Text(
                  &quot;Acompanhe a rotas das linhas \n e esta&#231;&#245;es do metr&#244; \n de Recife&quot;,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 12,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
              // TextButton(
              //   onPressed: (){},
              //   child: Text(&quot;VER LINHAS&quot;),
              //   style: ButtonStyle(
              //       foregroundColor: MaterialStateProperty.all(Colors.black),
              //       backgroundColor:MaterialStateProperty.all(blueDetails),
              //       fixedSize: MaterialStateProperty.all(const Size(95, 5)),
              //       shape: MaterialStateProperty.all&lt;RoundedRectangleBorder&gt;(
              //           RoundedRectangleBorder(
              //             borderRadius: BorderRadius.circular(3),
              //           )
              //       )
              //   ),
              // ),
            ],
          ),
        ),
      ),&#180;

How can I increment this textButton of the photo? Pls, someone can help me??

答案1

得分: 1

不要担心,我们在开始学习Flutter时也和你一样 将”Text”下面放置”TextButton”的方法如下: 看一下我的图片,你会明白如何分析布局:

Row(children: [
  Image... // 在这里插入你的图片
  Expanded( // 扩展右侧的剩余空间
    child: Column(
      mainAxisSize: MainAxisSize.min, // 最小化列的大小,如果没有这个代码,布局会出问题
      children: [
        Text // 在这里插入你的文本
        TextButton // 在这里插入你的文本按钮
      ]
    )
  )
])

祝你好运!将”Text”下面放置”TextButton”的方法如下:

英文:

Don't worry, we same as you when we start learning Flutter 将”Text”下面放置”TextButton”的方法如下: Take a look as my picture, you would understand how to analyze the layout:

Row(children: [
  Image... // your image here
  Expanded( // expand rest of right space
    child: Column(
      mainAxisSize: MainAxisSize.min, //minimize the size of column, if don&#39;t have this code, layout will be broken
      children: [
        Text // your text here,
        TextButton // your text button here
      ]
    )
  )
])

Good luck! 将”Text”下面放置”TextButton”的方法如下:

答案2

得分: 0

为了将Text下面的textButton留在下方,您可以使用Row而不是Column。祝您有美好的一天。

英文:

in order to leave the textButton below the Text , you can use Row instead of Column.
Have a nice day.

huangapple
  • 本文由 发表于 2023年5月21日 22:10:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/76300313.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定