如何在Flutter的容器中将Row小部件居中?

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

How can I center Row widget in container Flutter?

问题

我想要将Row小部件居中在Container中,但无法做到。

期望设计

我的期望设计如下:

<img src="https://i.stack.imgur.com/qnA1y.png">

但我得到了以下输出:

我的输出:

<img src="https://i.stack.imgur.com/RyHeN.jpg">

以下是我的代码:

Container(
  height: Dimensions.height40,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(Dimensions.radius10),
    color: Colors.white,
  ),
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center, // 将这行更改为居中对齐
      children: [
        Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
        SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
      ],
    ),
  ),
)

SmallText

class SmallText extends StatelessWidget {
  final Color? color;
  final String text;
  final double size;
  final TextAlign? align;

  const SmallText({
    Key? key,
    this.color = const Color(0xffCF1357),
    this.size = 16,
    required this.text,
    this.align = TextAlign.center,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      textAlign: align,
      style: TextStyle(
        color: color,
        fontSize: size,
        fontFamily: 'ROCK',
      ),
    );
  }
}

请注意,我已将RowmainAxisAlignment属性更改为MainAxisAlignment.center,以实现在Container中将其居中对齐的效果。

英文:

I want to center the Row widget in Container but can't do it.

Desire Design

My desire Design look like this : -

<img src="https://i.stack.imgur.com/qnA1y.png">

but I'm getting this output

My Output : -

<img src="https://i.stack.imgur.com/RyHeN.jpg">

Here is my code : -

Container(
  height: Dimensions.height40,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
  child: Padding(
	padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
	child: Row(
	  mainAxisAlignment: MainAxisAlignment.spaceBetween,
	  children: [
		Image.asset(&quot;assets/images/g.png&quot;, width: Dimensions.width20 + 5),
		SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
	  ],
	),
  ),
),

SmallText

class SmallText extends StatelessWidget {
  final Color? color;
  final String text;
  final double size;
  final TextAlign? align;

  const SmallText({
    Key? key,
    this.color = const Color(0xffCF1357),
    this.size = 16,
    required this.text, this.align=TextAlign.center,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      textAlign: align,
      style: TextStyle(
          color: color, fontSize: size, fontFamily: &#39;ROCK&#39;),
    );
  }
}

答案1

得分: 0

替换你的 Row 小部件

Row(
   mainAxisAlignment: MainAxisAlignment.spaceBetween,
     children: [
       Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
       SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
   ],
),

Row(
   children: [
     Icon(Icons.chevron_right_outlined, color: Colors.red),
     Expanded(
       child: Text(
         "asdfasdfasdfadsfadsf",
         textAlign: TextAlign.center,
         style: TextStyle(
             color: Colors.red, fontSize: 12, fontFamily: 'ROCK'),
       ),
     ),
   ],
)
英文:

Replace your Row widget

> From

    Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
           Image.asset(&quot;assets/images/g.png&quot;, width: Dimensions.width20 + 5),
           SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
       ],
    ),

> To

             Row(
                children: [
                  Icon(Icons.chevron_right_outlined, color: Colors.red),
                  Expanded(
                    child: Text(
                      &quot;asdfasdfasdfadsfadsf&quot;,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          color: Colors.red, fontSize: 12, fontFamily: &#39;ROCK&#39;),
                    ),
                  ),
                ],
              ),

答案2

得分: 0

尝试以下代码:

ElevatedButton(
  onPressed: () {},
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Image.network(
        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTffY2_D5YjjG8Mn3NnOFrXG2Piu72Ff5rbyHiyZXFvkWWtE3pLojAwOXpxAbC7PZa0JpU&amp;usqp=CAU',
        height: 40,
      ), //use your google image here
      Text(
        '使用 Google 登录',
        style: TextStyle(
          color: Colors.black,
        ),
      ),
      SizedBox()
    ],
  ),
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.white,
    fixedSize: const Size(250, 50),
  ),
)

结果-> 如何在Flutter的容器中将Row小部件居中?

英文:

Try below code:

ElevatedButton(
      onPressed: () {},
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Image.network(
            &#39;https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTffY2_D5YjjG8Mn3NnOFrXG2Piu72Ff5rbyHiyZXFvkWWtE3pLojAwOXpxAbC7PZa0JpU&amp;usqp=CAU&#39;,
            height: 40,
          ), //use your google image here
          Text(
            &#39;Sign in with Google&#39;,
            style: TextStyle(
              color: Colors.black,
            ),
          ),
          SizedBox()
        ],
      ),
      style: ElevatedButton.styleFrom(
          backgroundColor: Colors.white, fixedSize: const Size(250, 50)),
    ),

Result-> 如何在Flutter的容器中将Row小部件居中?

答案3

得分: 0

请尝试这种方式...

    Container(
      height: Dimensions.height40,
      decoration:
          BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
            ),
            SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
    
            // 如果文本溢出
            //  Expanded(child: Text('text', maxLines: 2)),
          ],
        ),
      ),
    ),
英文:

try this way...

Container(
  height: Dimensions.height40,
  decoration:
      BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Image.asset(&quot;assets/images/g.png&quot;, width: Dimensions.width20 + 5),
        ),
        SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)

        // if text overflowing
        //  Expanded(child: Text(&#39;text&#39;, maxLines: 2)),
      ],
    ),
  ),
),

huangapple
  • 本文由 发表于 2023年1月9日 18:45:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/75056137.html
匿名

发表评论

匿名网友

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

确定