dart - Flutter で 2 つのボタンを連続して作成するにはどうすればよいですか?
何が間違っているのか、どう修正すればよいのか本当にわかりません。
画面上に 2 つのボタンを並べて表示したい
ステートレス ウィジェット MainPage があります:
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Person(),
History()
],
),
);
}
}
そして、2 つのボタンがあります: 人物と履歴 クラス「人物」と「歴史」があります:
class Person extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: RaisedButton(
child: Container(
width: 100,
height: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Person"),
Icon(Icons.person)
],
),
),
),
),
);
}
}
class History extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: RaisedButton(
child: Container(
width: 100,
height: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("History"),
Icon(Icons.history)
],
),
),
),
),
);
}
}
しかし、エラーが発生します: RenderFlex が右側の Infinity ピクセルによってオーバーフローしました。 どこが間違っているのでしょうか?
------------------------
わかりました。原因として考えられるものがたくさんあります。 まず第一に、スキャフォールドはすべてのステートレス ウィジェットで使用されるわけではありません。画面のルートとしてスキャフォールドは画面ごとに 1 つだけ使用する必要があります。
第二に、コンテナのメイン関数は次のことを回避します。d ボイラープレート ウィジェット。コンテナの子プロパティのみを使用する場合は、SizedBox を使用します。ただし、この場合、コンテナは不要です。
次のペンを確認してください。2 つのスキャフォールドを使用しておらず、多くのコンテナも使用していません。また、行 mainAxisAlignment プロパティを見てください https://codepen.io/ayRatul/pen/gOrXqMw
また、コンテナを SizedBox に置き換えてみてください。 SizedBox は、高さと幅のみを使用する場合にうまく機能します ;)
編集: 奇妙な理由で元のコードを保持したい場合は、次のようにします。
Row(
mainAxisSize:MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Person(),
History()
],
0
------------------------
oだけが存在するはずです各画面/ページにスキャフォールドを追加します。 （参照） したがって、Scaffold を各ボタンから MainPage に移動します。
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Person(),
History()
],
),
),
);
}
}
class Person extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: RaisedButton(
child: Container(
width: 100,
height: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Person"),
Icon(Icons.person)
],
),
),
),
);
}
}
class History extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: RaisedButton(
child: Container(
width: 100,
height: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("History"),
Icon(Icons.history)
],
),
),
),
);
}
}
0
------------------------
どこにでも Scaffold を設置すべきではありません。詳細はこちら: https://api.flutter.dev/flutter/material/Scaffold-class.html
class Person extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: null,
child: Container(
width: 100,
height: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text("Person"), Icon(Icons.person)],
),
),
);
}
}
class History extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: null,
child: Container(
width: 100,
height: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text("History"), Icon(Icons.history)],
),
),
);
}
}
0
------------------------
足場をネストしないでください:
Scaffold をネストする必要があるのはなぜですか?
足場は単一であるように設計されました。
人物ウィジェット
class Person extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: RaisedButton(
child: Container(
width: 100,
height: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text("Person"), Icon(Icons.person)],
),
),
),
);
}
}
履歴ウィジェット
class History extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: RaisedButton(
child: Container(
width: 100,
height: 100,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text("History"), Icon(Icons.history)],
),
),
),
);
}
}
メインページウィジェット
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [Person(), History()],
),
),
);
}
}
結果:
注: 上記からいくつかの改善を加えることができます。 // 1. RaizedButton ウィジェット内の冗長コンテナを削除する必要があります 例:
class Person extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
width: 100,
height: 100,
child: RaisedButton(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text("Person"), Icon(Icons.person)],
),
),
);
}
}
1
私の回答が、あなたの質問で指定された問題の解決に役立った場合、または元の投稿、受け入れてください。
– 所有時間2020 年 9 月 5 日午後 1 時 6 分
新着記事:
C# - System.Reflectionがnugetパッケージフォルダーから参照されていないPython - Pandas 相互の範囲内の列値を持つ行をマージするiis - mysql LONGTEXT フィールドに保存されている HTML テキストを読み取り可能な値に変換しますか?ios - VNCoreMLRequest リクエストの結果からboundingBoxを取得できませんnode.js - aws-sdk/dynamoose が DynamoDB ローカルで SQLite 構文エラーを引き起こす可能性はありますか?ManagmentObjectSearcher を使用した C# wmi クエリ例外無効クラスPython - .devcontainer.json で Docker を使用して VSCode で jupyter lab を起動する方法python - SciPy 疎行列 CSR_Matrix で挿入順序を保持するにはどうすればよいですか?アルゴリズム - 線形合同生成器 LCG の c で法 2^64 を実装する方法c# - powershell を使用して、windwos 10 で uwp アプリのスタートアップ項目を管理する方法は?Python - 変数が宣言された場所とは別のファイルで変数を編集するにはどうすればよいですか?Rustからgtkをリンクするにはどうすればよいですか?