[英]how to make different layout for tablet in flutter
我正在考慮為平板電腦/iPad 版本制作不同的布局,但我是 Flutter 的新手,所以我不太確定如何制作。 如果我能得到任何關於如何做到這一點的建議,我將不勝感激。
現在,如果我在平板電腦上運行,我的卡就會伸出來,我現在正試圖修復它。 此外,我正在嘗試在右側添加一個分隔符和列(下面附上設計的圖片),以便我可以添加更多文本。
這是我的卡片
Widget build(BuildContext context) {
return Container(
height: 180,
child: SingleChildScrollView(
child: Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Column(children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10,0),
child: Row(children: [
Text(
title,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Spacer(),
Container(
child: IconButton(
icon: Icon(Icons.favorite),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context)=> DetailsPage("Favorite")));
},
))
]),
),
Divider(color: Colors.black),
Row(children: [
//Legend
tileWidget(TileItem(
topText: "Top",
middleText: "Middle",
bottomText: "Bottom")),
Container(
color: Colors.red,
height: 60, width: 2),
(tileItems.length < 1) ? null : tileWidget(tileItems[0]),
Container(
color: Colors.green,
height: 60, width: 2),
(tileItems.length < 2) ? null : tileWidget(tileItems[1]),
Container(
color: Colors.black26, height: 60, width: 2),
(tileItems.length < 3) ? null : tileWidget(tileItems[2])
]),
]),
),
),
);
}
要獲取屏幕寬度,請使用MediaQuery.of(context).size.width
為 600dp 以下的任何寬度(即手機)制作一個小部件,為高於 600dp 的任何寬度制作一個小部件(即平板電腦)。 然后您的代碼將如下所示:
body: OrientationBuilder(builder: (context, orientation) {
if (MediaQuery.of(context).size.width > 600) {
isTablet= true;
} else {
isTablet= false;
} etc...
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.