如何在不将 child 扩展到全宽的情况下将中心小部件用于环绕小部件的 child？

Question

当我在 Wrap 小部件中使用的文本中使用中心时，如下面的代码所示：

Wrap(
   children: [
     Padding(
       padding: const EdgeInsets.symmetric(
         vertical: 6.0),
       child: Container(
         decoration: BoxDecoration(
           color: Colors.transparent,
           borderRadius: BorderRadius.circular(27),
           border: Border.all(
             color: Colors.grey.withOpacity(0.60)),
         ),
         padding: EdgeInsets.fromLTRB(9,6,9,6),
         child: Center(<--placing this center widget makes the child expand to full width
           child: Text(
             'NTU',
             style: TextStyle(
               color: Colors.white.withOpacity(0.87),
               fontSize: 16.5,
             ),
           ),
         ),
       ),
     )
   ]),

容器扩展到全宽，如下所示：

我想要的是：

但是在 Wrap 小部件的 child 中放置一个中心小部件似乎可以使其扩展到整个宽度。关于即使使用中心小部件如何使其缩小到 child 的宽度的任何建议？谢谢。

Answer 1

尝试为您的容器指定宽度，

                          Wrap(
                          children: [
                            Align(
                              alignment: Alignment.centerLeft,
                              child: Container(
                                width: 100,
                                decoration: BoxDecoration(
                                  color: Colors.transparent,
                                  borderRadius: BorderRadius.circular(27),
                                  border: Border.all(color: Colors.grey.withOpacity(0.60)),
                                ),
                                padding: EdgeInsets.fromLTRB(9, 6, 9, 6),
                                child: Center(
                                  child: Text(
                                    'NTU',
                                    style: TextStyle(
                                      color: Colors.black.withOpacity(0.87),
                                      fontSize: 16.5,
                                    ),
                                  ),
                                ),
                              ),
                            )
                          ],
                        ),

Answer 2

设置 Center 小部件的 widthFactor 以将其宽度设置为 child 的宽度乘以该系数。

return Wrap(
   children: [
     Padding(
       padding: const EdgeInsets.symmetric(
         vertical: 6.0),
       child: Container(
         decoration: BoxDecoration(
           color: Colors.transparent,
           borderRadius: BorderRadius.circular(27),
           border: Border.all(
             color: Colors.grey.withOpacity(0.60)),
         ),
         padding: const EdgeInsets.fromLTRB(9,6,9,6),
         child: Center(
           widthFactor: 1.5,
           child: Text(
             'NTU',
             style: TextStyle(
               color: Colors.white.withOpacity(0.87),
               fontSize: 16.5,
             ),
           ),
         ),
       ),
     )
   ]),

Answer 3

试试这个代码：

Wrap(
                          children: [
                            Row(
                              children: [
                                Flexible(
                                  child: SizedBox(width: MediaQuery.of(context).size.width),
                                ),
                                Container(
                                width: 100,
                                decoration: BoxDecoration(
                                  color: Colors.transparent,
                                  borderRadius: BorderRadius.circular(27),
                                  border: Border.all(color: Colors.grey.withOpacity(0.60)),
                                ),
                                padding: EdgeInsets.fromLTRB(9, 6, 9, 6),
                                child: Center(
                                  child: Text(
                                    'NTU',
                                    style: TextStyle(
                                      color: Colors.black.withOpacity(0.87),
                                      fontSize: 16.5,
                                    ),
                                  ),
                                ),
                              ),
                        
                                Flexible(
                                  child: SizedBox(width: MediaQuery.of(context).size.width),
                                ),
                              ],
                            ),
                          ],
                        ),

如何在不将 child 扩展到全宽的情况下将中心小部件用于环绕小部件的 child？

How to use center widget for the child of a wrap widget without expanding the child to the full width?

dart

flutter

flutter-layout