StatelessWidgetの一般的に使用されるコンポーネントの概要、Flutterの空の半分を保持しますか?

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('大意了,没有闪'),
  ),

効果:
ここに画像の説明を挿入

継続的な学習。

おすすめ

転載: blog.csdn.net/qq_45137584/article/details/113109322