StatelessWidget의 일반적으로 사용되는 구성 요소 요약, Flutter의 하늘 절반을 차지합니까?

StatelessWidget은 일반적으로 기본 요약을 사용했으며 Flutter를 배우기 시작했습니다. 요약은 주로 잊어 버리지 않도록 향후 학습에 사용됩니다.

여기에 사진 설명 삽입
제가 영상을 배운 선생님의 블로그 주소 는 선생님이 아주 잘하고 명확하고 이해하기 쉽다고 말했습니다.

Flutter 학습 첫날 : Flutter가 이중 시스템 개발을 지원하는지 여부를 알기 위해 Flutter 교육용 비디오를 구입하는 데 돈을 썼습니까?

Flutter 연구 둘째 날 : Dart의 일반적인 데이터 유형과 방법이 요약되어 건조 제품으로 가득 차 있으며 Python과 Java를 배운 사람들에게 너무 친숙한가요?

Flutter 학습 셋째 날 : 객체 지향 프로그래밍 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