Flutter 的核心设计思想便是:Everythind is a Widget。在flutter的世界里，包括views,view controllers,layouts等在内的概念都建立在Widget之上。widget是flutter功能的抽象描述。所以掌握Flutter的基础就是学会使用widget开始。
Text:创建一个Text文本
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text("title"),
),
body: MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key key, this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text(
"Android进阶之旅",
style: TextStyle(
fontSize: 20,
color: Colors.teal
),
);
}
}
属性：
maxLines: 最大行数
overflow:超出显示方式
textAlign:文本对齐方式
style:文本样式，包括fontSize、color等
效果：
创建一个按钮
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
FloatingActionButton(
child: Text("+", style: TextStyle(fontSize: 30)),
onPressed: () {
print("FloatingActionButton Click");
},
),
RaisedButton(
child: Text("RaisedButton"),
onPressed: () {
print("RaisedButton Click");
},
),
FlatButton(
child: Text("FlatButton"),
onPressed: () {
print("FlatButton Click");
},
),
OutlineButton(
child: Text("OutlineButton"),
onPressed: () {
print("OutlineButton Click");
},
),
RaisedButton(
child: Text("登录",
style: TextStyle(color:Colors.white),
),
color: Colors.red,
highlightColor: Colors.red[600], //添加按下背景
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)), //设置圆角
onPressed: () {
print("登录");
},
)
],
);
}
}
效果：
-
图片Widget
Image组件属性：
const Image({
...
this.width, //图片的宽
this.height, //图片高度
this.color, //图片的混合色值
this.colorBlendMode, //混合模式
this.fit,//缩放模式
this.alignment = Alignment.center, //对齐方式
this.repeat = ImageRepeat.noRepeat, //重复方式
...
})
加载项目资源图片：
首先，需要在项目中与lib创建平级的文件夹，比如images，然后将图片资源拷如images中。然后需要在pubspec.yaml文件中声明资源，比如：
assets:
- images/test.jpeg
加载本地图片代码：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text("title"),
),
body: Container(
child: Image.asset(
"images/test.jpeg",
width: 100,
height: 100,
alignment: Alignment.topCenter,
),
width: 300,
height: 300,
),
),
);
}
}
效果：
加载网络资源图片：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text("title"),
),
body: Container(
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602884612610&di=99e5e92e7d3fd95d9c922f29c35f4b61&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F57a2a20321de9.jpg",
alignment: Alignment.topCenter,
),
width: 300,
height: 300,
),
),
);
}
}
圆角图片：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text("title"),
),
body: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602884612610&di=99e5e92e7d3fd95d9c922f29c35f4b61&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F57a2a20321de9.jpg",
alignment: Alignment.topCenter,
)
),
),
),
);
}
}
效果：
TextFiled
TextField用于接收用户的文本输入。常用属性：
keyboardType键盘的类型，style设置样式，textAlign文本对齐方式，maxLength最大显示行数等等；
decoration：用于设置输入框相关的样式
icon：设置左边显示的图标
labelText：在输入框上面显示一个提示的文本
hintText：显示提示的占位文字
border：输入框的边框，默认底部有一个边框，可以通过InputBorder.none删除掉
filled：是否填充输入框，默认为false
fillColor：输入框填充的颜色
controller：
onChanged：监听输入框内容的改变，传入一个回调函数
onSubmitted：点击键盘中右下角的down时，会回调的一个函数
代码：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text("title"),
),
body: Center(
child: TextField(
decoration: InputDecoration(
labelText: "userName",
hintText: "请输入用户名",
filled: true,
fillColor: Colors.lightGreenAccent
),
maxLines: 1,
onChanged: (value) {
},
onSubmitted: (value) {
},
),
),
),
);
}
}
效果：
-
Form
Form表单也是一个Widget，可以在里面放入我们的输入框。但是Form表单中输入框必须是FormField类型的。这里我们实现登录框的控件。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Form(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.people),
labelText: "userName"
),),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.lock),
labelText: "passWord",
),
),
Container(
width: double.infinity,
height: 45,
child: RaisedButton(
child: Text("login",
style: TextStyle(color:Colors.white, fontSize: 17)
),
highlightColor: Colors.lightGreen,
color: Colors.red,
),
margin: EdgeInsets.all(10),
)
],
),
),
)
);
}
}
效果：
参考
Flutter快速上车之Widget
Flutter(七)之Flutter的基础Widget
ListView&GirdView