从没接触过Dart语言,自己根据CSDN上的文章搭配好flutter的运行环境,直接上手写代码。
1-移动端显示文本
//1-执行导包操作
import 'package:flutter/material.dart';
//2-写main方法,在main方法中执行一个内置函数runApp(),在runApp()中传入MaterialApp(),
//MaterialApp()中有一个参数名为home,home:后面就可以写自定义的控件类
main(){
runApp(MaterialApp(home: Home(),));
}
//3-自定义的控件类,它会继承flutter中有状态或者无状态的控件
//无状态:控件里面的数据不会发生改变
class Home extends StatelessWidget{
//4-重写 StatelessWidget 的 build 方法
@override
Widget build(BuildContext context) {
//在这里可以返回原生的控件
return Text("data111");
}
}
2-更改字号fontSize、背景色、字本身的颜色
@override
Widget build(BuildContext context) {
//在这里可以返回原生的控件
return Text("data111",style: TextStyle(
fontSize: 20,
color: Colors.greenAccent,
backgroundColor: Colors.redAccent),);
}
3-采用flutter提供的Scaffold框架
@override
Widget build(BuildContext context) {
//在这里可以返回原生的控件
//title用来接收参数
return Scaffold(
appBar: AppBar(title: Text("data111",style: TextStyle(fontSize: 20,color: Colors.greenAccent,backgroundColor: Colors.redAccent),)),
);
}
4-标题居中效果
return Scaffold(
appBar: AppBar(title: Text("data111",),centerTitle: true,),
);
5-改变标题栏的背景颜色
return Scaffold(
appBar: AppBar(title: Text("data111",),centerTitle: true,backgroundColor: Colors.redAccent,),
);
6-APP主体(body)色调
main(){
runApp(MaterialApp(theme: ThemeData.dark(), home: Home(),));//ThemeData.dark()夜间模式
}
7-在body部分显示图片
首先在项目文件下找到windows文件夹→打开pubspec.yaml文件
删除这几行的注释
注意格式:assets前只有两个空格。
配置完成后,回到main.dart文件里继续写代码
return Scaffold(
appBar: AppBar(title: Text("data111",),centerTitle: true,backgroundColor: Colors.redAccent,),
body: Image.asset('image/星空.jpg'),
);
8-改变图片样式
本地图片:
8-1改变高度和宽度,让图片显示成一个正方形
第一种方法:
return Scaffold(
appBar: AppBar(title: Text("data111",),centerTitle: true,backgroundColor: Colors.redAccent,),
body: Image.asset('image/星空.jpg',height: 120,width: 120,fit: BoxFit.fill,),
);
第二种方法:
body: Image.asset('image/星空.jpg',height: 120,width: 120,fit: BoxFit.cover,),
可以看出来,第一种方法让图片的比例发生了变化,第二种方法切割了图片。
第三种方法(重复图片):
body: Image.asset('image/星空.jpg',height: 120,width: 120,repeat: ImageRepeat.repeat,),
网络图片:
return Scaffold(
appBar: AppBar(title: Text("data111",),centerTitle: true,backgroundColor: Colors.redAccent,),
body: Image.network('https://wx4.sinaimg.cn/mw690/008rfPOvly1hmo9ra14w3j319c28we81.jpg',),
);
实现圆形图片:
return Scaffold(
appBar: AppBar(title: Text("data111",),centerTitle: true,backgroundColor: Colors.redAccent,),
body: CircleAvatar(backgroundImage: AssetImage('image/地月.jpg')),//本地图片
);
更改圆形图片的大小(radius属性):
body: CircleAvatar(backgroundImage: AssetImage('image/地月.jpg'),radius: 100,),//本地图片
return Scaffold(
appBar: AppBar(title: Text("data111",),centerTitle: true,backgroundColor: Colors.redAccent,),
body: CircleAvatar(backgroundImage: NetworkImage('https://wx4.sinaimg.cn/mw690/008rfPOvly1hmo9ra14w3j319c28we81.jpg'),radius: 100,),//网络图片
);
占位图(当网络图片无法加载时,使用本地图片进行代替):
return Scaffold(
appBar: AppBar(title: Text("data111",),centerTitle: true,backgroundColor: Colors.redAccent,),
body: FadeInImage(placeholder: AssetImage('image/夜晚.jpg'),image: NetworkImage('https://wx4.sinaimg.cn/mw690/008rfPOvly1hmo9ra14w3j319c28we81.jpg')),
);
9-flutter中的三种布局
9-1单组件布局Center
return Scaffold(
appBar: AppBar(
title: Text("组件布局",),
centerTitle: true,
backgroundColor: Colors.redAccent,),
body: Center(child: Text('单组件布局,文本可以显示在中间'),)
);
9-2多组件布局Column
9-3多组件布局Row
注意:长度超出屏幕会报错
9-4混合布局:
body: Column(children: [
Row(children: [
Text('文本1'),
Text('文本1'),
Text('文本1'),
Text('文本1'),
Text('文本1'),
],),
Row(children: [
Image.asset('image/星球.jpg')
],),
],)
10-Button控件
改变按钮的背景颜色
第一种方法:
body: OutlinedButton(onPressed: (){print("点击OutlinedButton按钮后触发的内容");},
child: Icon(Icons.add),
style:ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.red))
),
第二种方法:
body: OutlinedButton(onPressed: (){print("点击OutlinedButton按钮后触发的内容");},
child: Icon(Icons.add),
style:ElevatedButton.styleFrom(backgroundColor: Colors.yellow)
),
通过点击按钮触发函数
@override
Widget build(BuildContext context) {
//在这里可以返回原生的控件
//title用来接收参数
return Scaffold(
appBar: AppBar(
title: Text("组件布局",),
centerTitle: true,
backgroundColor: Colors.redAccent,),
body: OutlinedButton(onPressed: (){func();},
child: Icon(Icons.add),
style:ElevatedButton.styleFrom(backgroundColor: Colors.yellow)
),
);
}
void func(){
print("点击按钮触发函数");
}
11-有状态控件Statefulwidget和SetState
//1-执行导包操作
import 'package:flutter/material.dart';
//2-写main方法,在main方法中执行一个内置函数runApp(),在runApp()中传入MaterialApp(),
//MaterialApp()中有一个参数名为home,home:后面就可以写自定义的控件类
main(){
runApp(MaterialApp( home: Home(),));//ThemeData.dark()夜间模式
}
//3-自定义的控件类,它会继承flutter中有状态或者无状态的控件
//有状态:控件里面的数据会发生改变
class Home extends StatefulWidget{
@override
_HomeState createState() => _HomeState();
}
//每创建一个有状态的控件,将相应的类也写出来
class _HomeState extends State<Home>{
var count = 0;//需要显示的数字
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("这是一个标题"),),
body: Center(child: Text(count.toString()),),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add)
,onPressed: (){setState(() {//setState的作用是让界面上显示的数据发生改变
count++;
});}
),
);
}
}
入门的第一阶段结束了,一路顺下来的话,我们就能基本读懂main.dart一开始最初始的内容
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {//1-先设置无状态的控件
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(//2-再返回MaterialApp
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
//StatelessWidget包裹一个Material的好处是:将MaterialApp里的东西都给写死,节省APP性能。
class MyHomePage extends StatefulWidget {//有状态控件
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,//将纵向布局居中
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}