flutter 容器的BackgroundColor仅在展开的小部件中 Package 文本

niknxzdl 于 2023-06-24 发布在 Flutter

关注(0)|答案(2)|浏览(117)

我有一个像图1这样的设计，我的问题是文本将被 Package 在一个带有背景渐变的容器中，但由于我使用扩展来 Package 这个容器，所以它总是像图2那样得到所有的空白空间，这与设计不匹配。
如果我使用的是Flexible，我如何将箭头图标对齐到行的末尾，如图3所示。请帮助我找到一个解决方案，谢谢。

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)
查找此代码的解决方案

flutter

来源：https://stackoverflow.com/questions/76525584/backgroundcolor-of-the-container-only-wrap-the-text-inside-expanded-widget

2条答案

按热度按时间

oknrviil1#

啊，没关系，我刚刚找到了一个解决方案，使用Flexible和MainAxisAlignment.spaceBetween，我将把我的代码放在下面，谢谢你的帮助。

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)),
                ),
              ],
            ),
          )

赞(0）回复(0）举报 2023-06-24

yftpprvb2#

你可以试试这个：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: () {},
                   ),
                 ),
               ],
             ),
           ],
         ),
       ),
     ),

赞(0）回复(0）举报 2023-06-24

我来回答

flutter 容器的BackgroundColor仅在展开的小部件中 Package 文本

2条答案

相关问题

热门标签

最新问答