Flutter - #15. Stack
私が見たいFlutter日記
ソース:https://api.flutter.dev/flutter/widgets/Stack-class.html
公式文書は本当にいいところですね・・・
Stack
ソース:https://api.flutter.dev/flutter/widgets/Stack-class.html
公式文書は本当にいいところですね・・・
Stack
名前の通り、stackクラスはサブ要素をスタックしたいときに使用できます.最初のサブエレメントは一番下に積み上げられ、サブエレメントは上に積み上げられます.
前回の好奇心のグラデーションもStackで表現できます!
基本的な例を見てから、Positizedを見て一緒に書きます.
各サブエレメントの配置を異にする場合は、Positivedを使用してサブエレメントを囲み、位置を指定します.
コード例-Stackのみ使用
今日も公式ドキュメントのサンプルコードを持ってきて回ってみます.import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Test Stack';
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const Center(
child: StackWidget(),
),
),
);
}
}
class StackWidget extends StatelessWidget {
const StackWidget({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
width: 200,
height: 200,
color: Colors.red,
),
Container(
width: 150,
height: 150,
color: Colors.green,
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
],
);
}
}
Stackの下にサブエレメントがリストされている以外は何も設定されていませんが、実際には
alignmentDirectionプロパティはalignmentです.トップスター、fitはstackfitです.ばらばらなため、初期化されています.
スタックを開くジェネレータを以下に示します.生成者でしょ? Stack({
Key? key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
(
'Use clipBehavior instead. See the migration guide in flutter.dev/go/clip-behavior. '
'This feature was deprecated after v1.22.0-12.0.pre.',
)
this.overflow = Overflow.clip,
this.clipBehavior = Clip.hardEdge,
List<Widget> children = const <Widget>[],
}) : assert(clipBehavior != null),
super(key: key, children: children);
childrenとtextDirectionを除いて、特定の値で初期化されます.特に、オーバーフロー属性はclipBehavior属性に置き換えられるようになりましたので、オーバーフロー属性はなるべく書き込まないことをお勧めします.
では、上記のコードでalignとfitのプロパティを少し変更しましょう.
一番左の運転画面はchildren以外何も触れていない上のコードです.
StackFit.loose, AlignmentDirectional.topStartStackFit.expandAlignmentDirectional.bottomCenter
Positizedといえば、文章が長すぎて、次の日記を書かなければなりません.
今日の日記はここまで!
Reference
この問題について(Flutter - #15. Stack), 我々は、より多くの情報をここで見つけました
https://velog.io/@sharveka_11/Flutter-15.-Stack
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Test Stack';
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const Center(
child: StackWidget(),
),
),
);
}
}
class StackWidget extends StatelessWidget {
const StackWidget({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
width: 200,
height: 200,
color: Colors.red,
),
Container(
width: 150,
height: 150,
color: Colors.green,
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
],
);
}
}
Stack({
Key? key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
(
'Use clipBehavior instead. See the migration guide in flutter.dev/go/clip-behavior. '
'This feature was deprecated after v1.22.0-12.0.pre.',
)
this.overflow = Overflow.clip,
this.clipBehavior = Clip.hardEdge,
List<Widget> children = const <Widget>[],
}) : assert(clipBehavior != null),
super(key: key, children: children);
Reference
この問題について(Flutter - #15. Stack), 我々は、より多くの情報をここで見つけました https://velog.io/@sharveka_11/Flutter-15.-Stackテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol