织梦 企业网站,广元市规划和建设局网站,微信小程序开发技术,建设银行网站信任小部件Widget是一个类#xff0c;按照继承方式#xff0c;分为无状态的StatelessWidget和有状态的StatefulWidget。
这里先创建一个简单的无状态的Text小部件。
Text文本Widget
文件#xff1a;lib/app/app.dart。
import package:flutter/material.dart;class App exte…小部件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 // 适应空间),),);}
}
这里用到了容器装饰器BoxDecoration。
