我正試圖復制AppBar widget，如下圖所示。我嘗試使用Row部件，并在它的子部件中添加所需的部件，并添加crossAxisAlignment: CrossAxisAlignment.center，以便將所有的widget排列在中心位置（水平方向，因為它是一個行widget）。但是我無法實作這個結果，得到了A RenderFlex overflowed by 26 pixels on the right.錯誤，（顯然是因為它流出了appBar區域）。
要求：
我的：
代碼：
Scaffold(
appBar: AppBar(
仰角。0.0,
backgroundColor: Colors.transparent,
行動。[
IconButton(
onPressed: () {},
圖示。const Icon（Icons.search）。
color: Colors.black,
)
],
領導。InkWell(
孩子。行(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
兒童。[
容器(
高度。40,
寬度: 40,
裝飾。const BoxDecoration(
color: Colors.gray,
形狀。BoxShape.circle,
),
),
列(
mainAxisAlignment: MainAxisAlignment.start,
兒童。const [
文本(
"Welcome"。
風格。文本風格(
字體大小。10,
fontWeight: FontWeight.normal,
color: Colors.gray,
),
),
文本(
"John"。
風格。TextStyle(
字體大小。12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
onTap: () { // open drawer },/span>
),
),
);
如果有人能指導我做錯了什么，我將非常感激！
如果有人能指導我做錯了什么？ 謝謝！
uj5u.com熱心網友回復：
發生這種情況的原因是你使用了leading屬性，它的寬度限制由AppBar的leadingWidth正確定義，默認為56.0。你可以嘗試將leadingWidth設定為double.infinity，這樣就可以了。
另外，你應該重新考慮使用leading，因為它的主要目的是在標題前放置一些圖示或小部件。
uj5u.com熱心網友回復：
讓我們試試標題吧
Scaffold(
appBar: AppBar(
仰角。0.0,
backgroundColor: Colors.transparent,
行動。[
IconButton(
onPressed: () {},
圖示。const Icon（Icons.search）。
color: Colors.black,
)
],
標題。InkWell(
onTap: (){},
孩子。行(
children: [
容器(
width: 40,
高度。40。
裝飾。const BoxDecoration(
color: Colors.gray,
形狀。BoxShape.circle,
),
),
SizedBox(width: 10,)。
列(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
文本(
"Welcome"。
風格。文本風格(
字體大小。10,
fontWeight: FontWeight.normal,
color: Colors.gray,
),
),
文本(
"John"。
風格。TextStyle(
字體大小。12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
),
),
身體。容器(
))
具有領先性
leadingWidth: double.infinity,
領先。InkWell(-------)
輸出：
uj5u.com熱心網友回復：
你可以替換我的源代碼，請它100%作業。
Scaffold(
appBar: AppBar(
仰角。0.0,
backgroundColor: Colors.transparent,
行動。[
IconButton(
onPressed: () {},
圖示。const Icon（Icons.search）。
color: Colors.black,
)
],
領導。InkWell(
孩子。FittedBox(
孩子。行(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
兒童。[
容器(
高度。40,
寬度: 40,
裝飾。const BoxDecoration(
color: Colors.gray,
形狀。BoxShape.circle,
),
),
列(
mainAxisAlignment: MainAxisAlignment.start,
兒童。const [
文本(
"Welcome"。
風格。文本風格(
字體大小。10,
fontWeight: FontWeight.normal,
color: Colors.gray,
),
),
文本(
"John"。
風格。TextStyle(
字體大小。12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
),
),
));
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/329163.html
標籤：