图片,文本展示,导航,内置图标

import 'package:flutter/material.dart';

void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
//导航栏
title: Text(
"你好啊",
textAlign: .left,
style: TextStyle(fontSize: 17, color: Colors.orange),
),
backgroundColor: Colors.blue,
),
body: Column(children: [MyApp(), MyButton(), MyImgView(),MyClipImg(),LoadLocalImgView() ]),
// body: Column(children: [MyHonePage()]),
),
),
);
}

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

@override
Widget build(BuildContext context) {
// TODO: implement build
// return const Center(//文本
// child: Text("内容",textDirection: .ltr,
// style: TextStyle(
// fontSize: 22,
// color: Color.fromRGBO(244, 244, 123, 1)
// ),
// ),
// );

return Center(
  child: Container(
    //容器
    width: 100,
    height: 100,
    margin: EdgeInsets.fromLTRB(0, 20, 0, 0), //外边距
    alignment: .center, //容器内部视图对齐方式
    decoration: BoxDecoration(
      //渲染器-圆角颜色阴影啥的
      color: Colors.red,
      border: Border.all(color: Colors.grey, width: 1), //边线及其颜色
      borderRadius: BorderRadius.circular(13), //圆角
      boxShadow: const [
        BoxShadow(color: Colors.black, blurRadius: 9.0),
      ], //阴影
      gradient: LinearGradient(
        colors: [Colors.black, Colors.yellow],
      ), //渐变背景色
    ),
    child: Text(
      "哈2哈2哈哈哈2哈哈哈2哈哈哈2哈哈哈2哈哈哈2哈哈哈2哈哈哈2哈哈哈哈",
      style: TextStyle(fontSize: 19, color: Colors.white),
      maxLines: 2,
    ),
  ),
);

}
}

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

@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
width: 200,
height: 40,
alignment: .center,
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(20),
),
child: Text(
"点击",
style: TextStyle(fontSize: 17, color: Colors.white),
textAlign: .center,
),
);
}
}

//网络图片加载
class MyImgView extends StatelessWidget {
const MyImgView({super.key});

@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Container(
width: 100,
height: 100,
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
decoration: BoxDecoration(
color: Colors.yellow,
image: DecorationImage(
image: NetworkImage(
"https://gips3.baidu.com/it/u=1821127123,1149655687&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280",
),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(50), //圆角
),
),
);
}
}

//圆角图片
class MyClipImg extends StatelessWidget {
const MyClipImg({super.key});

@override
Widget build(BuildContext context) {
// TODO: implement build
return ClipOval(
child: Image.network(
"https://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
width: 80,
height: 80,
fit: BoxFit.cover,
),
);
}
}

//加载本地图片
class LoadLocalImgView extends StatelessWidget {
const LoadLocalImgView({super.key});

@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 100,
width: 100,
decoration: BoxDecoration(color: Colors.yellow),
child: Image.asset("images/a.jpeg", fit: BoxFit.cover),
);
}
}

//内置图标
class MyHonePage extends StatelessWidget {
const MyHonePage({super.key});

@override
Widget build(BuildContext context) {
// TODO: implement build
return Column(
children: [
SizedBox(height: 20),
Icon(Icons.home, color: Colors.red),
SizedBox(height: 20),
Icon(Icons.back_hand, color: Colors.red),
SizedBox(height: 20),
Icon(Icons.category),
],
);
}
}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容