Flutter从入门到放弃(一)

VSCode开发,使用的Dart语言

后续会重新学习一遍巩固一下基础,然后补充完善深入了解Flutter开发

VScode开发

shift + cmd + p 输入 Flutter new proect 创建新文件选择Application 
select a folder to create the project in
创建Project name - FlutterLearn

文件夹lib类里面找到main.dart,可以看到里面的运行代码

提示:创建文件的时候以dart为结尾

全部删除以后写入自己的内容

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("这是第一个项目")),
        // body: const myApp(),
        body: Column(
          children: const [
            // myApp(),
            // MyButton(),
            // MyText(),
            // myImage(),
            // SizedBox(height: 10),
            // circular(),
            // SizedBox(height: 10),
            // ClipImage(),
            // SizedBox(height: 10),
            // LoaclImage(),
            // myPage(),
          ],
        )),
  ));
}

// void main() {
//   //使用Column加载不了listview,会报错
//  runApp(const MyApp());
// }

• 设置自己的myApp,BoxDecoration属性设置

class myApp extends StatelessWidget {
  const myApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: const EdgeInsets.fromLTRB(0, 100, 0, 0),
        alignment: Alignment.center, //配置容器内元素的方位
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color: Colors.black,
          border: Border.all(
              //边框
              color: Colors.red,
              width: 2),
          borderRadius: BorderRadius.circular(10), //圆角
          boxShadow: const [
            //配置阴影
            BoxShadow(color: Colors.black, blurRadius: 10.0)
          ],
          //线性渐变色LinearGradient
          //RadialGradient 径向渐变
          gradient: const RadialGradient(colors: [Colors.red, Colors.yellow]),
        ),
        child: const Text(
          "下午好",
          textDirection: TextDirection.ltr,
          style: TextStyle(color: Colors.blue, fontSize: 20),
        ),
      ),
    );
  }
}

• 设置一个按钮

class MyButton extends StatelessWidget {
  const MyButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.fromLTRB(0, 100, 0, 0),
      alignment: Alignment.center,
      width: 200,
      height: 40,
      // transform: Matrix4.translationValues(40, 0, 0),//位移
      // transform: Matrix4.rotationZ(0.2),//旋转
      // transform: Matrix4.skewY(.2),
      // margin: const EdgeInsets.all(10),四周偏差
      // margin: const EdgeInsets.fromLTRB(20, 10, 20, 10),//指定偏差
      // padding: const EdgeInsets.all(2),
      // padding: const EdgeInsets.fromLTRB(10, 20, 30, 40),//内边距
      decoration: BoxDecoration(
          color: Colors.blue, borderRadius: BorderRadius.circular(8.0)),
      child: const Text(
        "点击按钮",
        style: TextStyle(
          color: Colors.white,
          fontSize: 10,
        ),
      ),
    );
  }
}

• Text属性

class MyText extends StatelessWidget {
  const MyText({super.key});

  @override
  Widget build(BuildContext context) {
    // ignore: todo
    // TODO: implement build
    return Container(
      width: 200,
      height: 200,
      margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),
      decoration: const BoxDecoration(color: Colors.yellow),
      child: const Text(
        "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
        textAlign: TextAlign.center,
        overflow: TextOverflow.ellipsis, //溢出显示小点
        maxLines: 1,
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.w900, //加粗
          color: Colors.red,
          fontStyle: FontStyle.italic, //倾斜
          letterSpacing: 2, //字体之间的间隔
          decoration: TextDecoration.underline, //底部加根线
          decorationColor: Colors.red,
          decorationStyle: TextDecorationStyle.dashed,
        ),
      ),
    );
  }
}

• 加载网络图片属性设置

class myImage extends StatelessWidget {
  const myImage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
          margin: const EdgeInsets.fromLTRB(0, 10, 0, 0),
          // alignment: Alignment.centerLeft,//也可以控制
          width: 150,
          height: 150,
          decoration: const BoxDecoration(color: Colors.black),
          child: Image.network(
            //通过networi下载网络图片
            "https://ts1.cn.mm.bing.net/th/id/R-C.3801929d593b321b573efe97c440dbf5?rik=%2b%2fdiug%2fmG%2f%2fW%2bg&riu=http%3a%2f%2fbaike.sfacg.com%2fUpLoadFile%2f2010022283725561.jpg&ehk=gQrPf24eklXO86Ghb0XYr%2fsFTxVbOozAfjhcGIfg4dg%3d&risl=&pid=ImgRaw&r=0",
            scale: 1, //缩放
            alignment: Alignment.centerLeft, //调整图片位置,默认居中
            // fit: BoxFit.fill,
            // fit: BoxFit.cover,
            // repeat:ImageRepeat.noRepeat,//平铺
            //结合圆形实现
            // width: 400,
            // height: 400,
          )),
    );
  }
}

• 加载网络图片(圆形)

class circular extends StatelessWidget {
  const circular({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        height: 150,
        width: 150,
        decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(75),
            image: DecorationImage(
              image: NetworkImage(
                  "https://ts1.cn.mm.bing.net/th/id/R-C.3801929d593b321b573efe97c440dbf5?rik=%2b%2fdiug%2fmG%2f%2fW%2bg&riu=http%3a%2f%2fbaike.sfacg.com%2fUpLoadFile%2f2010022283725561.jpg&ehk=gQrPf24eklXO86Ghb0XYr%2fsFTxVbOozAfjhcGIfg4dg%3d&risl=&pid=ImgRaw&r=0"),
              fit: BoxFit.cover,
            )),
      ),
    );
  }
}

• 图片属性裁剪

class ClipImage extends StatelessWidget {
  const ClipImage({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ClipOval(
      child: Image.network(
        "https://ts1.cn.mm.bing.net/th/id/R-C.3801929d593b321b573efe97c440dbf5?rik=%2b%2fdiug%2fmG%2f%2fW%2bg&riu=http%3a%2f%2fbaike.sfacg.com%2fUpLoadFile%2f2010022283725561.jpg&ehk=gQrPf24eklXO86Ghb0XYr%2fsFTxVbOozAfjhcGIfg4dg%3d&risl=&pid=ImgRaw&r=0",
        width: 150,
        height: 150,
        fit: BoxFit.cover,
      ),
    );
  }
}

• 加载本地图库

class LoaclImage extends StatelessWidget {
  const LoaclImage({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Image.asset('images/ganum.png',   
    height: 150,
    width: 150,
    scale: 0.5,);
  }
}