FlutterでGrid

Flutterを触っていたところ、Xamarin.Formsに見られるような比率でレイアウトできるGridが見つからなかったので、作り方をメモしておきます。

作り方

LayoutBuilderでWidgetのサイズを取得し、RowとColumnを使って配置をしています。

ソース

class LayoutBuilderSample extends StatelessWidget{
	@override
	Widget build(BuildContext context) {
		return new LayoutBuilder(
			builder: (BuildContext context, BoxConstraints constraints)
			{
				Size size = new Size(constraints.maxWidth,constraints.maxHeight);
				return new Column(
				  children: <Widget>[
				    new Row(
				    	children: <Widget>[
				    		new SizedBox(
				    			height: size.height/4,
				    			width: size.width/3,
				    			child: new Card(color: Colors.blue),
				    		),
				    		new SizedBox(
				    			height: size.height/4,
				    			width: size.width/2,
				    			child: new Card(color: Colors.greenAccent),
				    		),
				    		new SizedBox(
				    			height: size.height/4,
				    			width: size.width/6,
				    			child: new Card(color: Colors.orange),
				    		),
				    	],
				    ),
				    new Row(
					    children: <Widget>[
						    new SizedBox(
							    height: size.height/4,
							    width: size.width/4,
							    child: new Card(color: Colors.blue),
						    ),
						    new SizedBox(
							    height: size.height/4,
							    width: size.width/3,
							    child: new Card(color: Colors.greenAccent),
						    ),
						    new SizedBox(
							    height: size.height/4,
							    width: size.width/12*5,
							    child: new Card(color: Colors.orange),
						    ),
					    ],
				    ),
				    new Row(
					    children: <Widget>[
						    new SizedBox(
							    height: size.height/4,
							    width: size.width/3*2,
							    child: new Card(color: Colors.blue),
						    ),
						    new SizedBox(
							    height: size.height/4,
							    width: size.width/5,
							    child: new Card(color: Colors.greenAccent),
						    ),
						    new SizedBox(
							    height: size.height/4,
							    width: size.width/15*2,
							    child: new Card(color: Colors.orange),
						    ),
					    ],
				    ),
				    new Row(
					    children: <Widget>[
						    new SizedBox(
							    height: size.height/4,
							    width: size.width/6,
							    child: new Card(color: Colors.blue),
						    ),
						    new SizedBox(
							    height: size.height/4,
							    width: size.width/3,
							    child: new Card(color: Colors.greenAccent),
						    ),
						    new SizedBox(
							    height: size.height/4,
							    width: size.width/2,
							    child: new Card(color: Colors.orange),
						    ),
					    ],
				    ),
				  ],
				);
			},
		);
  }
}

それぞれのSizedBoxでheightとwidthが全体の大きさの何分の何なのかを指定し、大きさを決めています。子の合計の幅が親を超えるとエラーが出るので注意が必要です。

全体のコードはGitHubにあげておきます。
github.com

Xamarin.iOSのAsset Catalogが反応しない件について

　Xamarin.iOSでアプリのアイコンを設定しようとプロジェクトにMedia.xcassetsを追加しても、デバッグしたときにアイコンが結びついていないことがあります。

　写真のようにInfo.plistにはちゃんと結びつけているのですが…

解決策

　エクスプローラーでInfo.plistを開いて編集します。中身はXMLで書かれているので、下の方に書いてある

 <key>XSAppIconAssets</key>
<string>Resources/Media.xcassets/AppIcons.appiconset</string>

 のところがxcassetsの正しい場所を示すようにします。私の場合はResourcesフォルダにMedia.xcassetsが入っておらず、Info.plistと同階層にあったため

 <key>XSAppIconAssets</key>
<string>Media.xcassets/AppIcons.appiconset</string>

に変えたところ、アイコンが認識されるようになりました。

　これはバグなんだろうか…

Azure Mobile Apps Quick StartをXamarin.Formsで行う時

AzureのMobile Apps Quick StartをXamarin.Formsでやろうと思った時、

すごい量のエラーが出ることがあります。

アセンブリ参照が古いためにこれが起こるため、

ソリューションエクスプローラーのソリューション○○を右クリック→ソリューションのNuGetパッケージの管理から

アセンブリを更新するとエラーが消えると思います。

”xamlctaskが予期せず失敗しました”のエラーメッセージが出る

どこかxaml内でスペルミスしています。探しましょう。

Xamarin.FormsのTabbedPageでタブの位置によってtitleを変える

TabbedPageのCurrentPageChangedを使えばいいんですね。

public MainPage()
{
InitializeComponent();

this.Title = this.CurrentPage.Title;

this.CurrentPageChanged += MainPage_CurrentPageChanged;
}

private void MainPage_CurrentPageChanged(object sender, EventArgs e)
{
this.Title = this.CurrentPage.Title;
}