容器的背景颜色仅包裹扩展小部件内的文本。

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

BackgroundColor of the Container only wrap the text inside Expanded Widget

问题

I have a design like Pic 1, and my problem is that the text will be wrapped in a Container with background gradient, but since I'm using the Expanded to wrap this Container, so it always gets all the empty space like picture 2, which won't match the design.

If I'm using the Flexible, how can I align the arrow icon to the end of the row as shown in picture 3.

Please help me find a solution, thanks.

英文:

I have a design like Pic 1,and my problem is that the text will be wrapped in a Container with background gradient, but since i'm using the Expanded to wrap this Container, so it's always get all the empty space like picture 2,which won't match the design.

If i'm using the Flexible,how can i align the arrow icon to the end of row as show in picture 3.
Please help me to find a solution, tks.

  Container(
              width: 400,
              height: 300,
              color: Colors.blue,
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Row(
                      children: [
                        Flexible(
                            child: Container(
                                color: Colors.white,
                                child: Text("Công thực tế:21 công"))),
                        Align(
                            alignment: Alignment.topRight,
                            child: Icon(Icons.arrow_circle_right))
                      ],
                    ),
                  )
                ],
              ),
           ),

[Pic 1](https://i.stack.imgur.com/2HWAZ.png)
[Pic 2](https://i.stack.imgur.com/m5aQy.png)
[pic 3](https://i.stack.imgur.com/XUrrR.png)

Find a solution for this code

答案1

得分: 1

I will translate the code part for you:

Container(
  margin: EdgeInsets.fromLTRB(16, 16, 16, 0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Flexible(
        child: Container(
          color: Colors.white,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Flexible(
                child: Text("Công thực tế: 21 công"),
              )
            ],
          ),
        ),
      ),
      Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(24),
          border: Border.all(
            width: 1,
            color: Colors.black.withOpacity(0.45),
          ),
        ),
        child: Icon(
          Icons.expand_more_outlined,
          color: Colors.black.withOpacity(0.45),
        ),
      ),
    ],
  ),
)
英文:

Ah, nevermind, i just found a solution, using the Flexible and MainAxisAlignment.spaceBetween, i will put my code below, thanks for your help.

Container(
            margin: EdgeInsets.fromLTRB(16, 16, 16, 0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Flexible(
                  child: Container(
                    color: Colors.white,
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Flexible(
                          child: Text("Công thực tế: 21 công"),
                        )
                      ],
                    ),
                  ),
                ),
                Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(24),
                      border: Border.all(
                          width: 1, color: Colors.black.withOpacity(0.45))),
                  child: Icon(Icons.expand_more_outlined,
                      color: Colors.black.withOpacity(0.45)),
                ),
              ],
            ),
          )

答案2

得分: 0

你可以尝试这个:

child: Container(
  height: 200,
  width: 300,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.only(
      topRight: Radius.circular(10.0),
      bottomRight: Radius.circular(10.0),
      topLeft: Radius.circular(10.0),
      bottomLeft: Radius.circular(10.0),
    ),
  ),
  child: Padding(
    padding: const EdgeInsets.all(12.0),
    child: Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              height: 50,
              width: 200,
              decoration: BoxDecoration(
                color: Colors.blue.shade900,
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(40.0),
                  bottomRight: Radius.circular(40.0),
                  topLeft: Radius.circular(40.0),
                  bottomLeft: Radius.circular(40.0),
                ),
              ),
              child: Center(child: Text('Text', style: TextStyle(color: Colors.white))),
            ),
            CircleAvatar(
              backgroundColor: Colors.blue.shade900,
              radius: 20,
              child: IconButton(
                padding: EdgeInsets.zero,
                icon: Icon(Icons.keyboard_arrow_up),
                color: Colors.white,
                onPressed: () {},
              ),
            ),
          ],
        ),
      ],
    ),
  ),
),
英文:

you can try this:
output

child: Container(
       height: 200,
       width: 300,
       decoration: BoxDecoration(
         color: Colors.blue,
         borderRadius: BorderRadius.only(
           topRight: Radius.circular(10.0),
           bottomRight: Radius.circular(10.0),
           topLeft: Radius.circular(10.0),
           bottomLeft: Radius.circular(10.0),
         ),
       ),
       child: Padding(
         padding: const EdgeInsets.all(12.0),
         child: Column(
           children: [
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
                 Container(
                   height: 50,
                   width: 200,
                   decoration: BoxDecoration(
                     color: Colors.blue.shade900,
                     borderRadius: BorderRadius.only(
                         topRight: Radius.circular(40.0),
                         bottomRight: Radius.circular(40.0),
                         topLeft: Radius.circular(40.0),
                         bottomLeft: Radius.circular(40.0),
                    ),
                   ),
                   child:
                   Center(child: Text('Text',style: TextStyle(color: Colors.white))),

  ),
                 CircleAvatar(
                   backgroundColor: Colors.blue.shade900,
                   radius: 20,
                   child: IconButton(
                     padding: EdgeInsets.zero,
                     icon: Icon(Icons.keyboard_arrow_up),
                     color: Colors.white,
                     onPressed: () {},
                   ),
                 ),
               ],
             ),
           ],
         ),
       ),
     ),

huangapple
  • 本文由 发表于 2023年6月22日 00:59:07
  • 转载请务必保留本文链接:https://go.coder-hub.com/76525584.html
匿名

发表评论

匿名网友

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

确定