我正試圖理解以下的腳手架:
。 return Scaffold(
floatingActionButton: FloatingActionButton(
孩子。Icon(Icons.add),
背景顏色: Colors.green,
前景顏色: Colors.white,
onPressed: () {
PostCrud().crearNuevoPostTest(_miId)。
},
),
body: 欄目(
兒童。[
StreamBuilder<List<OtroUsuario>> (
stream: otrosUsuariosBloc.todosOtrosUsuarios()。
builder: (context, snapshot) {
if (!snapshot.hasData) return CircularProgressIndicator()。
return Padding(
padding。const EdgeInsets.only(top: 8.0)。
孩子。容器(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
展開(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.length 1,
itemBuilder。(context, index) {
if (index == 0) {
return Padding(
padding: const EdgeInsets.all(8.0)。
孩子。GestureDetector()
onTap: () {},
孩子。列(
children: [
容器(
width: 67,
高度。67。
邊距。const EdgeInsets.all(10)。
裝飾。BoxDecoration(
形狀。BoxShape.circle,
影像。裝飾圖片()
適合。BoxFit.fill,
影像。資產影像(
"assets/images/buscar_usuario.png"/span>)。)
)),
),
],
),
),
);
} else {
var otro_usuario = snapshot.data[index - 1] 。
bool is_ambassador = false;
is_ambassador = otro_usuario.is_ambassador。
if (is_ambassador) {
return GestureDetector(
孩子。Stack(
對齊。AlignmentDirectional.center,
溢位。Overflow.visible,
兒童。[
列(
children: [
容器(
width: 65,
高度。65。
邊距。
const EdgeInsets.all(10)。
裝飾。BoxDecoration(
邊界。border.all(
color: Colors.black,
width: 3,
),
形狀。BoxShape.circle,
影像。裝飾影像(
適合。BoxFit.fill,
影像。NetworkImage(
otro_usuario
.profile_image)。)
)),
),
Text(otro_usuario.username,
風格。TextStyle(
fontWeight:
FontWeight.bold,
color: Colors.red))。
],
),
定位(
左邊。61,
頂部。52,
孩子。容器(
高度。22,
寬度: 22,
孩子。影像(
影像。資產影像(
"assets/images/home_ambassador.png"))。
),
],
),
onTap: () {},
);
} else {
return GestureDetector(
孩子。列(
children: [
容器(
width: 70,
高度。70。
邊距。const EdgeInsets.all(10)。
裝飾。BoxDecoration(
邊界。border.all(
color: Colors.black,
width: 3,
),
形狀。BoxShape.circle,
影像。裝飾影像(
適合。BoxFit.fill,
影像。NetworkImage(
otro_usuario
.profile_image)。)
)),
),
文本(
otro_usuario.username,
風格。TextStyle(
fontWeight: FontWeight.bold)。)
),
],
),
onTap: () {},
);
}
}
}),
),
],
),
),
);
}),
容器(
高度。MediaQuery.of(context).size.height。
width: MediaQuery.of(context).size.width,
color: Colors.teal,
)
],
),
);
}
}
我應該在螢屏頂部看到一個水平串列視圖和一個茶色背景的空容器,但我只看到一個茶色的螢屏,底部溢位36像素的資訊和一個浮動按鈕。
螢屏截圖:
我想知道為什么在所有設備(iPhone 12、iPhone 7、Android等)中都是36個像素,為什么不顯示串列視圖。
uj5u.com熱心網友回復:
似乎你正在使用height: MediaQuery.of(context).size.height,的螢屏只是用于容器,并使用Column作為它的父物件,但其他的子物件卻沒有得到任何空間。你可以用 body: Column和SingleChildScrollView。第二個問題出現在用ListView.builder包裹Expanded。通過用SizedBox(height:X,包裹解決了這個問題。
SizedBox(
高度。200, // depend on childrens size。
孩子。ListView.builder(.)
用Expanded包裝是行不通的,因為listView的祖先Column(post padding)的尺寸沒有被定義,而且column parents也來自Column Widget。你可以用SizedBox和Column包起來,這也會解決這個問題。
這是完整的Widget,我對這些部分進行了評論。但在這種情況下,我更喜歡CustomScrollView。
希望你能得到這個片段
return Scaffold(
floatingActionButton: FloatingActionButton(
孩子。Icon(Icons.add),
背景顏色: Colors.green,
前景顏色: Colors.white,
onPressed: () {
//PostCrud().crearNuevoPostTest(_miId);
},
),
body: SingleChildScrollView(
孩子。Column(
mainAxisSize: MainAxisSize.min,
children: [
// StreamBuilder<List<OtroUsuario>>()
//stream: otrosUsuariosBloc.todosOtrosUsuarios(),
// builder: (context, snapshot) {
// if (!snapshot.hasData) return CircularProgressIndicator();
// return
padding(
padding。const EdgeInsets.only(top: 8.0)。
孩子。容器(
color: Colors.gray.withOpacity(.5)。
//高度: 200, //你可以在這里提供高度。
孩子。Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
// ListView wi get Infinite height and we can not use `Expanded while using [SingleChildScrollView]`
SizedBox(
高度。200, // depend on childrens size.
孩子。ListView.builder()
滾動方向。Axis.horizontal,
itemCount: 44。
// snapshot.data.length 1,。
itemBuilder。(context, index) {
// return Text("item $index");
if (index == 0) {
return Padding(
padding: const EdgeInsets.all(8.0)。
孩子。GestureDetector()
onTap: () {},
孩子。列(
children: [
容器(
width: 67,
高度。67。
邊距。const EdgeInsets.all(10)。
裝飾。BoxDecoration(
形狀。BoxShape.circle,
影像。裝飾圖片()
適合。BoxFit.fill,
影像。資產影像(
"assets/images/buscar_usuario.png"/span>)。)
)),
),
],
),
),
);
} else {
//var otro_usuario = snapshot.data[index - 1];
bool is_ambassador = true。
is_ambassador = 1 < 2;
// otro_usuario.is_ambassador;.
// return Text("On Else");.
if (is_ambassador) {
return GestureDetector(
孩子。Stack(
對齊。AlignmentDirectional.center,
溢位。Overflow.visible,
兒童。[
列(
children: [
容器(
width: 65,
高度。65。
邊距。const EdgeInsets.all(10)。
裝飾。BoxDecoration(
邊界。border.all(
color: Colors.black,
width: 3,
),
形狀。BoxShape.circle,
影像。裝飾影像(
適合。BoxFit.fill,
影像。網路影像(
" otro_usuario.profile_image"。
),
)),
),
文本(
"otro_usuario.username"。
風格。TextStyle(
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
],
),
定位(
左邊。61,
頂部。52,
孩子。容器(
高度。22,
寬度: 22,
孩子。影像(
影像。資產影像(
"assets/images/home_ambassador.png"))。
),
],
),
onTap: () {},
);
} else {
return GestureDetector(
孩子。列(
children: [
容器(
width: 70,
高度。70。
邊距。const EdgeInsets.all(10)。
裝飾。BoxDecoration(
邊界。border.all(
color: Colors.black,
width: 3,
),
形狀。BoxShape.circle,
影像。裝飾影像(
適合。BoxFit.fill,
影像。網路影像(
" otro_usuario.profile_image")。)
)),
),
文本(
" otro_usuario.username",
風格。TextStyle(
fontWeight: FontWeight.bold)。)
),
],
),
onTap: () {},
);
}
}
}),
),
],
),
),
// }。
),
容器(
高度。MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.teal,
)
],
),
),
);
uj5u.com熱心網友回復:
試試下面的代碼,在SingleChildScrollView()里面添加你的柱子
uj5u.com熱心網友回復: 你可以嘗試用這個來替換你的列,用 uj5u.com熱心網友回復: 快取可以有一個背景 在你的streambuilder里面有一個widget,加上它也吃空間,這意味著它指定了螢屏的某些部分,加上你在Column下面放了一個Container,使它重疊,你做了一個Container,并呼叫Mediaquery,使螢屏尺寸達到全屏。
標籤:SingleChildScrollView(
孩子。Column(
children:[
//Your Widgets
ListViewListView(
shirkWrap: true。
物理學。ScrollPhysics(),
兒童。[
//add your streambuilder()。
]
)
return Scaffold(
backgroundColor: YourColor,
floatingActionButton: FloatingActionButton(
孩子。Icon(Icons.add),
背景顏色: Colors.green,
前景顏色: Colors.white,
onPressed: () {
PostCrud().crearNuevoPostTest(_miId)。
},
),
body: 欄目(
兒童。[
//Your Streambuilder an beyond,。
//嘗試洗掉下面的容器,。
//如果你想讓小工具等東西可以滾動,請將你的列包起來。
//SingleSchildScrollView。
]
)
);


