我有一排按鈕，水平方向有 SingleChildScrollView 的父級。包裝 SingleChildScrollView 后，行的元素不尊重 mainAxisAlignment，特別是 spaceBetween，它們之間沒有空格......
我怎樣才能讓 spaceBetween 再次作業？
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: const [
TransportModeButton(
iconPath: 'images/icons/walking_icon.png',
text: 'Walking',
),
TransportModeButton(
iconPath: 'images/icons/bicycle_icon.png',
text: 'Bike & eScooter',
),
TransportModeButton(
iconPath: 'images/icons/public_transport_icon.png',
text: 'Public transport',
)
],
),
),
uj5u.com熱心網友回復：
您可以通過將您的Row內部包裹起來來解決它BoxConstraints：
Container(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: const [
Text("test1"),
Text("test2"),
Text("test3"),
],
),
)),
),
編輯：
要從父母那里獲得約束，SingleChildsScrollView您可以使用 這樣做LayoutBuilder，因此代碼如下所示：
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: const [
Text("test1"),
Text("test2"),
Text("test3"),
],
),
));
})
uj5u.com熱心網友回復：
當你用 SCSV 包裝你的行時，行實際上沒有寬度，因為它是無限的。
它不依賴于螢屏的寬度或任何其他寬度來計算之間的空間。
如果您真的想啟用之間的空間，我會建議兩種方法：
- 用 Container/SizedBox/BoxConstraints 包裹 Row 并給它一個寬度。
- 添加 SizedBox / 使用 Padding 包裝 TransportModeButton，這將在按鈕之間手動創建空格。
uj5u.com熱心網友回復：
行/列根據需要占用盡可能多的空間，這意味著如果需要并且沒有限制，它可以超出可用高度。
您的行占用了所需的空間，而不是更多。因此， MainAxisAlignment 實際上正在作業（但不是我們想要的）。如果需要，可以放置一個帶寬度的 SizedBox。
我的建議是，如果您知道有多少小部件可用并且您沒有僅為此使用整個螢屏，請使用 ListView。
單子滾動視圖
Scaffold(
appBar: AppBar(),
body: SafeArea(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
)
],
),
),
),
);
串列顯示
Scaffold(
appBar: AppBar(),
body: SafeArea(
child: ListView(
scrollDirection: Axis.horizontal,
children: const [
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
Icon(
Icons.nordic_walking,
size: 50,
),
SizedBox(
width: 20,
),
],
),
),
);
uj5u.com熱心網友回復：
無需使用singlechildscrollview(SCSW) 來應對間隔場景。用戶滾動磁貼似乎是一個糟糕的 Ux。您可以使用類似softwrap. 如果您仍然想使用 SCSW，那么您可以嘗試通過將 SCSW 的子級包裝在ConstrainedBox.
constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/439868.html