Flutter

flutter图标组件

2020-07-23  本文已影响0人  喜剧收尾_XWX

1.Icon加载系统图标

所有系统图标命名参考系统图标网站,不过该网站经常性加载不出来,可以参考简书文章

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: '晴天',
      home: Scaffold(
          appBar: AppBar(title: Text('系统图标')),
          body: Center(
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.green,
              size: 40,
            ),
          )),
    );
  }
}

2.Icon加载Iconfont图标

  fonts:
    - family: iconfont
      fonts:
        - asset: fonts/iconfont.ttf
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: '晴天',
      home: Scaffold(
          appBar: AppBar(title: Text('系统图标')),
          body: Center(
            child: Icon(
              IconData(0xe667, fontFamily: 'iconfont'),
//             Icons.phone,
              color: Colors.green,
              size: 40,
            ),
          )),
    );
  }
}

3.图标按钮IconButton

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: '晴天',
      home: Scaffold(
          appBar: AppBar(title: Text('系统图标')),
          body: Center(
              child: IconButton(
            icon: Icon(
              Icons.add,
              size: 40,
            ),
            onPressed: () {
              print("按下操作");
            },
            tooltip: '按下操作',
          ))),
    );
  }
}

上一篇 下一篇

猜你喜欢

热点阅读