樣式和格式化文本背景和布局

我正在嘗試制作約會應用風格的顫振程式。我想在用戶影像的頂部顯示 5 個關鍵字作為小圓邊覆寫。目前，單詞串列是 1. 擴展頭像和 2. 單詞間隔太近， 3. 關鍵字的背景色塊像尖矩形，我希望它們像圓角矩形。我希望這是有道理的？

謝謝！

   Widget buildKeywords() => Container(
            child: Row(
              children: [
                const SizedBox(width: 8),
                Text(
                  'Keyword 1',
                  style: TextStyle(fontSize: 20, color: Colors.white, backgroundColor: AppTheme.ndsnPink),
                ),
                Text(
                  'Keyword 2',
                  style: TextStyle(fontSize: 20, color: Colors.white, backgroundColor: AppTheme.ndsnPink),
                ),
                Text(
                  'Keyword 3',
                  style: TextStyle(fontSize: 20, color: Colors.white, backgroundColor: AppTheme.ndsnPink),
                ),
                Text(
                  'Keyword 4',
                  style: TextStyle(fontSize: 20, color: Colors.white, backgroundColor: AppTheme.ndsnPink),
                ),
                Text(
                  'Keyword 5',
                  style: TextStyle(fontSize: 20, color: Colors.white, backgroundColor: AppTheme.ndsnPink),
                ),
              ],
            ),
          );

uj5u.com熱心網友回復：

看起來你有3個問題：

“1. 擴展個人資料影像”

如果要使其滾動，請用 包裹Row，SingleChildScrollView如下所示：

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row( /* ... */ ),
)

或者，如果您希望它們自動進入新行，請使用Wrap小部件而不是Row小部件。

“2. 單詞間隔太近”

您可以使用小部件包裝Text小Padding部件，也可以在這些文本之間插入一些SizedBox(width: 4)小部件。

“3.關鍵詞的背景色塊像尖矩形，我希望它們像圓角矩形。”

要對它們進行四舍五入，請使用ClipRRect或使用Chip小部件。

uj5u.com熱心網友回復：

我認為芯片是你需要的。鏈接：https ://api.flutter.dev/flutter/material/Chip-class.html

如果您需要超過 5 個專案或需要水平對齊的專案，請將 Wrap 替換為 ListView。

 Widget buildKeywords() => Container(
            child: Wrap(
              children: [
                const SizedBox(width: 8),
                Chip(
                  side:BorderSide(
                    color: Colors.pink,
                  ),
                  backgroundColor: Colors.pinkAccent,
                  label: Text(
                  'Keyword 1',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                  ),
                ),
                Chip(
                  side:BorderSide(
                    color: Colors.pink,
                  ),
                  backgroundColor: Colors.pinkAccent,
                  label: Text(
                  'Keyword 2',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                  ),
                ),
                Chip(
                  side:BorderSide(
                    color: Colors.pink,
                  ),
                  backgroundColor: Colors.pinkAccent,
                  label:Text(
                  'Keyword 3',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
                )
                ,
                Chip(
                  side:BorderSide(
                    color: Colors.pink,
                  ),
                  backgroundColor: Colors.pinkAccent,
                  label: Text(
                  'Keyword 4',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
                )
                ,
                Chip(
                  side:BorderSide(
                    color: Colors.pink,
                  ),
                  backgroundColor: Colors.pinkAccent,
                  label: Text(
                  'Keyword 5',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
                )               
              ],
            ),
          );

標籤：扑

上一篇：Websocket問題阻止部署在heroku中的散景應用程式加載到網站中

下一篇：如何創建帶有文本和串列的小部件？