Flutter常用控件
1.富文本控件
class richText extends StatelessWidget {
const richText({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text.rich(TextSpan(
children: [
TextSpan( text: "hello world",
style: TextStyle(
fontSize: 20,
color: Colors.red
)
),
WidgetSpan(child: Icon(Icons.favorite,color: Colors.amber,)),
TextSpan( text: "hello world",
style: TextStyle(
fontSize: 20,
color: Colors.green
)
)
],
)
);
}
}
2.文本控件
class TextWidget extends StatelessWidget {
const TextWidget({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text("阿是大\n法官寒假大萨达撒撒的撒多萨达多\n撒多撒多快乐",
style: TextStyle(
fontSize: 30,
color: Colors.red
),
textAlign: TextAlign.center,);
}
}
3.按钮控件
class _HomeBodyState extends State<HomeBody> {
@override
Widget build(BuildContext context) {
return Column(
children:<Widget> [
//1.凸起
ElevatedButton(onPressed: ()=>null, child: Icon(Icons.add)),
//2.平整
FlatButton(onPressed: ()=>null,color: Colors.amberAccent, child: Icon(Icons.add)),
//
OutlineButton(onPressed: ()=>null,color: Colors.red,focusColor:Colors.red,child: Icon(Icons.add),),
TextButton.icon(onPressed: ()=>null, icon: Icon(Icons.add), label: Text("label")),
FlatButton(onPressed: ()=>null, color: Colors.orange,child: Row(
children: [
Icon(Icons.add),
Text("点击")
],
))
],
);
}
}
4.Listview列表控件
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title:'QGS Flutter',
home:Scaffold(
appBar:new AppBar(
title:new Text('ListView Widget')
),
body: new ListView(
children:<Widget>[
new ListTile(
leading:new Icon(Icons.access_time),
title:new Text('access_time')
),
new ListTile(
leading:new Icon(Icons.access_time),
title:new Text('access_time')
),
new ListTile(
leading:new Icon(Icons.access_time

本文介绍了Flutter中常用的UI控件,包括富文本、普通文本、 ElevatedButton、FlatButton、OutlineButton、TextButton、ListView及DropdownButton的使用方法,展示了它们在实际应用中的布局和交互效果。
最低0.47元/天 解锁文章
851

被折叠的 条评论
为什么被折叠?



