flutter 常用笔记 设置导航颜色两种方式，contaner圆角图片和圆形图片的使用

1.dart 文件必须引入；

import 'package:flutter/material.dart';
void main() {runApp(const MyApp());
}

2.自定义MyApp 类

2.1 MaterialApp 可以配置导航颜色

2.2 Scaffold 的 AppBar 可以配置导航颜色

class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.pink, //可以配置导航颜色),home: FirstPage('这是首页'),);}
}class FirstPage extends StatefulWidget {String title = '';FirstPage(this.title, {Key? key}) : super(key: key);@overrideState createState() => _FirstPageState();
}class _FirstPageState extends State {int count = 0;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(leadingWidth: 200,leading: GestureDetector(onTap: () => {{{{{}}}}// setState(//   () => {count++},// )},child: Row(children: const [SizedBox(width: 16,),Icon(Icons.location_on,size: 20,),Text('哈尔滨',style: TextStyle(fontSize: 16,),),],),),title: Text(widget.title,),actions: const [Padding(padding: EdgeInsets.only(right: 16.0),child: Icon(Icons.fiber_new_sharp),),],// foregroundColor: Colors.white, // 设置导航文字颜色// backgroundColor: Colors.green,// 设置导航颜色),body: Center(child: Column(children: [const SizedBox(height: 32),MyCount(count),const SizedBox(height: 16),const ImgBgCircle(),const SizedBox(height: 16),const MyClipOval(),const SizedBox(height: 16),const MyAssetImg(),],),),floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,floatingActionButton: FloatingActionButton(backgroundColor: Colors.green,onPressed: () => {setState(() => {count++},)},child: const Icon(Icons.add,size: 30,),),);}
}

3.container 实现圆行附片的效果

class ImgBgCircle extends StatelessWidget {const ImgBgCircle({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(width: 150,height: 150,decoration: BoxDecoration(borderRadius: BorderRadius.circular(75),image: const DecorationImage(fit: BoxFit.cover,// image: NetworkImage(//   'https://images.ofweek.com/Upload/News/2017-11/25/WooVergil/1511574357832080801.png',// ),image: AssetImage('images/c.png'),alignment: Alignment.center,),),);}
}class MyClipOval extends StatelessWidget {const MyClipOval({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return ClipOval(child: Image.network('https://pics3.baidu.com/feed/902397dda144ad34a3c51a20dcc8b3f330ad8595.jpeg?token=88196e12072d8edd3d02cf18ccbebdfa&s=95224BB1384206DA0529A59C030030CB',width: 150,height: 150,fit: BoxFit.cover,),);}
}class MyAssetImg extends StatelessWidget {const MyAssetImg({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(child: Image.asset('images/c.png'),color: Colors.pink,);}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！