如何在不將孩子擴展到全寬的情況下為包裝小部件的孩子使用中心小部件？

當我在 Wrap 小部件中使用的文本中使用 center 時，如下面的代碼所示：

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 小部件的子級中放置一個中心小部件似乎使其擴展到整個寬度。即使使用中心小部件，關于如何使其縮小到孩子的寬度的任何建議？謝謝你。

uj5u.com熱心網友回復：

嘗試為您的容器提供寬度，

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

uj5u.com熱心網友回復：

一組小部件，將其寬度設定widthFactor為Center子寬度乘以該因子。

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

uj5u.com熱心網友回復：

試試這個代碼：

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

標籤：扑 镖 颤振布局

上一篇：catchError和“try-catch”不起作用（異步）

下一篇：是否可以根據Api資料更改小部件樣式和操作？