flutter学习·入门1

夏木子杉

已于 2024-02-16 04:49:22 修改

阅读量651

点赞数 9

文章标签： flutter 学习 javascript

于 2024-02-16 04:46:36 首次发布

本文链接：https://blog.youkuaiyun.com/Life_Effort/article/details/136097022

版权

从没接触过Dart语言，自己根据优快云上的文章搭配好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),
      ), 
    );
  }
}