我寫了一個頁面，在頂部一切正常，因為它應該是。而在底部，我有一個事件的歷史記錄。我的容器的寬度是自動確定的（取決于螢屏的寬度），而高度 - 不，在不同的設備上有不同的高度（底部的縮進是不同的）。是否有可能自動確定高度（到螢屏的末端）？另外，我想在這個容器的底部添加一個滾動條，這樣，當事件出現在那里時，我可以在底部和頂部滾動瀏覽它們。我將感謝您的幫助。
我的頁面。
我的代碼：
Widget build(BuildContext context) {
回傳 Scaffold(
body: 容器(
裝飾。BoxDecoration(
color:Colors.white12
),
孩子。列(
mainAxisAlignment: MainAxisAlignment.start,
兒童。<Widget>/span>[
列()
兒童。<Widget>/span>[
SizedBox（高度：20.0）。
行(
mainAxisAlignment: MainAxisAlignment.spaceAround,
兒童。<Widget>/span>[
扁平按鈕(
textColor: Colors.blueGrey,
color: Colors.transparent,
孩子。Text('yes',textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB（30.0, 10.0, 30, 10.0）。
),
扁平按鈕(FlatButton)
textColor: Colors.blueGrey,
color: Colors.transparent,
孩子。Text('no',textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB（30.0, 10.0, 30, 10.0）。
)
],
),
SizedBox（高度：15.0）。
容器(
孩子。Text(('20000' == null ? '' : '10000'), style: TextStyle(fontSize: 45.0,color: Colors.blueGrey))。
padding: EdgeInsets.fromLTRB（0, 0.0, 0, 20.0）。
),
容器(
孩子。Text("weight", style: TextStyle(fontSize: 20.0,color: Colors.blueGrey))。
padding: EdgeInsets.only(top: 2, bottom: 40, left: 0, right: 0),
),
中心(
孩子。容器(
對齊。Alignment.center,
width: double.infinity,
高度：430。
裝飾。BoxDecoration(
邊界。border.all(
寬度：1.5
),
borderRadius: borderRadius.circular(25)
),
child: new Column(
兒童。[
容器(
child: Text("歷史事件", style: TextStyle(fontSize: 20.0,color: Colors.blueGrey)）。)
padding: EdgeInsets.all(2.0)
),
],
),
)//容器
)
]
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_scanQR()。
});
},
child: const Icon(Icons.qr_code),
backgroundColor: Colors.pink,
),
);
}我的scrin（更新代碼后）
uj5u.com熱心網友回復：
@override
Widget build(BuildContext context) {
return Scaffold(
體。Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
展開(
孩子。Scrollbar(
child: new ListView(
shrinkWrap: true,
子女。[
SizedBox(height: 20.0)。
行(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
孩子。Text('yes', textScaleFactor: 2.5）。)
onPressed: null。
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0) 。
),
扁平按鈕(
textColor: Colors.blueGrey,
color: Colors.transparent,
孩子。Text('no', textScaleFactor: 2.5）。)
onPressed: null。
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0) 。
)
],
),
SizedBox（高度：15.0）。
容器(
孩子。Text(('20000' == null ? '' : '10000'）, style: TextStyle(fontSize: 45.0, color: Colors.blueGrey) )。
padding: EdgeInsets.fromLTRB(0, 0.0, 0, 20.0) 。
),
容器(
孩子。Text("weight", style: TextStyle(fontSize: 20.0, color: Colors.blueGrey)）。)
padding: EdgeInsets.only(top: 2, bottom: 40, left: 0, right: 0）。)
),
容器(
對齊。Alignment.center,
裝飾。BoxDecoration(border: border.all(width: 1.5), borderRadius: borderRadius.round(25))。
孩子。列(
兒童。[
中心(
孩子。容器(
高度。65。
孩子。Text("歷史事件", style: TextStyle(fontSize: 25.0, color: Colors.blueGrey)。
padding: EdgeInsets.all(2.0)））。)
容器(
孩子。Text("Event 1", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)）。)
padding: EdgeInsets.all(2.0))。
SizedBox(
高度。200。
),
容器(
孩子。Text("Event 2", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)）。)
padding: EdgeInsets.all(2.0))。
SizedBox(
高度。200。
),
容器(
孩子。Text("Event 3", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)）。)
padding: EdgeInsets.all(2.0))。
SizedBox(
高度。50。
),
],
)),
],
)))
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
//_scanQR();.
});
},
孩子。const Icon（Icons.qr_code）。
backgroundColor: Colors.pink,
),
);
}
uj5u.com熱心網友回復：
你可以通過使用Media Query來改變回應的高度或寬度。要做到這一點，你需要用Material App或Cupetino App來包裝你的支架，它允許你使用MediaQuery。
void main() {
runApp(MaterialApp(home: MyApp())。
}
為了使串列可滾動，你可以使用ListView.builder
Center(
孩子。容器(
margin: new EdgeInsets.only( bottom: 20,right: 15,left: 15）。)
對齊。Alignment.center,
width: double.infinity,
高度。MediaQuery.of(context).size.height/1.5。
裝飾。BoxDecoration(
邊界。border.all(width: 1.5)。
borderRadius: borderRadius.round(25))。
孩子。new Column(
兒童。[
容器(
child: Text("歷史事件"。
風格。TextStyle(
字體大小。20.0, color: Colors.blueGrey)）。)
padding: EdgeInsets.all(2.0))。
],
),
) //Container。
)
我添加了一點邊距以使它看起來更好。當然，如果你想的話，你也可以使用MediaQuery來獲得邊距或填充。
https://i.stack.imgur.com/W6oXd.png
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/309242.html
標籤：