当前位置：首页 > news >正文

Flutter常用Widget小部件

news 2025/7/19 0:52:27

小部件Widget是一个类，按照继承方式，分为无状态的StatelessWidget和有状态的StatefulWidget。

这里先创建一个简单的无状态的Text小部件。

Text文本Widget

文件：lib/app/app.dart。

import 'package:flutter/material.dart';class App extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Text('你好世界！',textDirection: TextDirection.ltr,style: TextStyle(fontSize: 50.0,color: Color(0xAAFF0000),backgroundColor: Color(0xAAFFFFFF),),textAlign: TextAlign.center,overflow: TextOverflow.ellipsis,));}
}

这里引用了flutter的material包，里面包含StatelessWidget类。

Flutter调用Widget

import 'package:flutter/material.dart';
import 'package:package_name/app/app.dart';void main() {runApp(App());
}

RichText 富文本

import 'package:flutter/material.dart';class App extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: RichText(textDirection: TextDirection.ltr,text: TextSpan(text: '你好，', style: TextStyle(fontSize: 50.0), children: [TextSpan(text: '世界！',style: TextStyle(color: Colors.pinkAccent,fontWeight: FontWeight.bold,),),TextSpan(text: '我来了！'),]),));}
}

这里用到了RichText，详情见：https://api.flutter-io.cn/flutter/widgets/RichText-class.html

Image（图像）

显示资源包里的图像

import 'package:flutter/material.dart';class App extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Image.asset('assets/images/1.png',width: 300,),);}
}

或

import 'package:flutter/material.dart';class App extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Image(image: AssetImage('assets/images/1.png'),width: 300,),);}
}

这里用到了图片，需要把图片放到assets/images目录下，然后在pubspec.yaml定义资源名称，

  assets:- assets/images/1.png

显示来自网络的图像

import 'package:flutter/material.dart';class App extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Image(image: NetworkImage('https://img-home.csdnimg.cn/images/20250107060517.png'),width: 300,),);}
}

这里用了Image挂件。

容器

import 'package:flutter/material.dart';class App extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(color: Colors.deepPurpleAccent, // 容器颜色alignment: Alignment.topCenter, // 对齐方式padding: EdgeInsets.all(60), // 边距child: Image(image: NetworkImage('https://img-home.csdnimg.cn/images/20250107060517.png'),fit: BoxFit.cover // 适应空间),),);}
}

装饰容器

import 'package:flutter/material.dart';class App extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(decoration: BoxDecoration(color: Colors.deepOrangeAccent,borderRadius: BorderRadius.all(Radius.circular(25)),border: Border.all(color: Colors.deepOrangeAccent,style: BorderStyle.solid,),boxShadow: [BoxShadow(color: Colors.deepOrangeAccent,offset: Offset(5, 20),blurRadius: 30,)]),alignment: Alignment.topCenter, // 对齐方式padding: EdgeInsets.all(0), // 边距width: 400,height: 200,child: Image(image: AssetImage('assets/images/1.png'), fit: BoxFit.cover // 适应空间),),);}
}