StatelessWidgetの一般的なコンポーネントの概要
StatelessWidgetは一般的に使用される基本的な要約です。私もFlutterを学び始めました。要約は主に将来の学習に使用され、忘れないようにします。
私がビデオを学んだ先生のブログアドレス、先生は非常によく、明確で理解しやすいと言いました。
Flutter学習の初日:Flutterがデュアルシステム開発をサポートしているかどうかを知るためだけに、Flutterの教育ビデオを購入するためにお金を費やしましたか?
Flutter研究の2日目:ダーツの一般的なデータ型とメソッドが要約されており、乾物でいっぱいで、PythonとJavaを学んだ人にはあまりにも友好的ですか?
Flutter学習の3日目:オブジェクト指向プログラミングのDart言語の学習により、Javaの基本を思い出すことができます。「正直で、私をだまさない」ことは、本当にすぐに始めることができます。
1.テキスト
dartは宣言のレイアウト形式を使用しているためです。
TextStyle textStyle = TextStyle(fontSize: 30, //字体大小
color:Colors.deepOrange, //字体颜色
decoration: TextDecoration.lineThrough, //设置删除线
decorationColor: Colors.green, //删除线颜色为绿色
decorationStyle: TextDecorationStyle.wavy, //删除线为波浪线
fontWeight: FontWeight.bold, //加粗
fontStyle: FontStyle.italic, //斜体
//letterSpacing: 2.0,
// backgroundColor: Colors.blue, //背景颜色
);
Text(
'Hello world', //输出内容
style: textStyle, //字体格式
//textDirection: TextDirection.ltr,
softWrap: false, //自动换行
overflow: TextOverflow.fade, //文字超出屏幕之后的处理方式(clip裁剪,fade 渐隐,ellipsis 省略号)
textScaleFactor: 1.0,
)
配置形式:
効果:
2.アイコン
Icon(
Icons.access_alarm, //系统自带图片
size: 50, //图片大小
color: Colors.red, //图片颜色
),
外部画像をインポートする方法は?
1.最初に新しい画像ディレクトリを作成します
2.インポートする必要のある画像をインポートします
3.pubspec.yamlファイルに画像アドレスを追加します
4.画像コンポーネントを使用して外部画像をインポートします
Image(
width: 100,
height: 100,
image:AssetImage('images/image.png'),
)
効果は次のとおりです。
3.CloseButton、BackButton
CloseButton(),
BackButton(),
IconButton(icon:Icon(Icons.people), onPressed: null),
効果は次のとおりです。
4.チップ
Chip(
avatar: Icon(Icons.people), //左边的图片
label: Text('有趣的小组件'),
deleteIcon: Icon(Icons.remove_red_eye_outlined), //右边图片
onDeleted: ()=>print('删除'), //响应事件
),
効果:
5.ディバイダー
デリミタ
Divider(
height: 10,
indent: 10,
color: Colors.orange,
),
効果:
6.カード
Card(
color: Colors.blue, //卡片背景色
shadowColor: Colors.red, //阴影颜色
elevation: 5, //阴影高度
margin:EdgeInsets.all(10), //外边距
child: Container( //用Container容器包裹起来
width: 150,
height: 80,
padding: EdgeInsets.all(10), //内边距
child:Column(
children: [
Text(
'I am Card',
style: textStyle,
),
Icon(
Icons.add_a_photo,
size: 30,
color: Colors.orange,
)
],
)
),
),
効果:
7.AlertDialog
AlertDialog(
title: Text('耗子喂汁'),
content: Text('大意了,没有闪'),
),
効果:
継続的な学習。。。。