热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

flutter常用视图组件

1.customclasswidgetmain.dart1importpackage:fluttermaterial.dart;2import.pagescustom.dart;3

1.custom class widget

main.dart

 1 import 'package:flutter/material.dart';
 2 import './pages/custom.dart';
 3 
 4 void main() {
 5   runApp(new Application());
 6 }
 7  class Application extends StatelessWidget {
 8    @override
 9    Widget build(BuildContext context) {
10      return new MaterialApp(
11        title: 'custom',
12        home: new Scaffold(
13          body: new customWidgets()
14        )
15      );
16    }
17  }

custom.dart

 1 import 'package:flutter/material.dart';
 2 
 3 class customWidgets extends StatelessWidget {
 4   @override
 5   Widget build(BuildContext context) {
 6     return new Container(
 7       color: Colors.pink,
 8       child: new Container(
 9         color: Colors.purple,
10         margin: const EdgeInsets.all(10.0),
11         child: new Container(
12           color: Colors.orange,
13           margin: const EdgeInsets.all(10.0),
14           child: new Container(
15             color: Colors.yellow,
16             margin: const EdgeInsets.all(10.0),
17           ),
18         ),
19       ),
20     );
21   }
22 }

 2.radio单选按钮

import 'package:flutter/material.dart';

void main() {
  runApp(new Application());
}
class Application extends StatefulWidget {
  @override
  _ApplicationState createState() => _ApplicationState();
}

class _ApplicationState extends State {
  int rvalue = 0;
  void method1(value) {
    setState(() {
      rvalue = value;
    });
  }
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'a',
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("a"),
            backgroundColor: Colors.green,
          ),
          body: new Center(
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                new Radio(value: 1, groupValue: rvalue, onChanged: (int rval){method1(rval);}),
                new Radio(value: 2, groupValue: rvalue, onChanged: (int rval){method1(rval);}),
                new Radio(value: 3, groupValue: rvalue, onChanged: (int rval){method1(rval);}),
              ],
            ),
          ),
        )
    );
  }
}

3.checkbox复选框

import 'package:flutter/material.dart';

void main() {
  runApp(new Application());
}
class Application extends StatefulWidget {
  @override
  _ApplicationState createState() => _ApplicationState();
}

class _ApplicationState extends State {
  bool select = false;
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'a',
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("a"),
            backgroundColor: Colors.green,
          ),
          body: new Center(
            child: new Checkbox(
                value: select,
                onChanged: (bool cb) {
                  setState(() {
                    select = cb;
                    print(select);
                  });
                }),
          ),
        )
    );
  }
}

4.snackBar通知条

import 'package:flutter/material.dart';
import './pages/OtherPage.dart';

void main() {
  runApp(new Application());
}
class Application extends StatefulWidget {
  @override
  _ApplicationState createState() => _ApplicationState();
}

class _ApplicationState extends State {
  bool bval = false;
  void method1(value) {
    setState(() {
      bval = value;
    });
  }
  @override
  Widget build(BuildContext context) {
    final GlobalKey _skey = new GlobalKey();
    void method1() {
      _skey.currentState.showSnackBar(new SnackBar(
        content: new Text('Activated snack bar'),
        backgroundColor: Colors.blue,
      ));
    }
    return new MaterialApp(
        title: 'a',
        home: new Scaffold(
          key: _skey,
          body: new Center(
            child: new RaisedButton(
              onPressed: () {method1();},
              child: new Text('raisebtn'),
            ),
          ),

        )
    );
  }
}

 5.drawer,类似qq侧边划出的效果

 1 import 'package:flutter/material.dart';
 2 
 3 void main() {
 4   runApp(new Application());
 5 }
 6 class Application extends StatefulWidget {
 7   @override
 8   _ApplicationState createState() => _ApplicationState();
 9 }
10 
11 class _ApplicationState extends State {
12   bool bval = false;
13   void method1(value) {
14     setState(() {
15       bval = value;
16     });
17   }
18   @override
19   Widget build(BuildContext context) {
20     return new MaterialApp(
21         title: 'a',
22         home: new Scaffold(
23           appBar: new AppBar(
24             title: new Text("a"),
25             backgroundColor: Colors.green,
26           ),
27           drawer: new Drawer(
28             child: new ListView(
29               children: [
30                 new UserAccountsDrawerHeader(
31                   accountName: new Text('pengjinlong'),
32                   accountEmail: new Text('pengjinlong43@gmail.com'),
33                   currentAccountPicture: new CircleAvatar(
34                     backgroundColor: Colors.black26,
35                     child: new Text('Peng'),
36                   ),
37                   decoration: new BoxDecoration(color: Colors.blueAccent),
38                   otherAccountsPictures: [
39                     new CircleAvatar(
40                       backgroundColor: Colors.black26,
41                       child: new Text('jin'),
42                     ),
43                     new CircleAvatar(
44                       backgroundColor: Colors.black26,
45                       child: new Text('long'),
46                     ),
47                   ],
48                 ),
49                 new ListTile(
50                   title: new Text('d1'),
51                   trailing: new Icon(Icons.accessibility),
52                   onTap: () {
53                     Navigator.pop(context);
54                   },
55                 ),
56                 new ListTile(
57                   title: new Text('d1'),
58                   trailing: new Icon(Icons.accessibility),
59                 ),
60                 new ListTile(
61                   title: new Text('d1'),
62                   trailing: new Icon(Icons.accessibility),
63                 )
64               ],
65             ),
66           ),
67         )
68     );
69   }
70 }

6.switch按钮

 1 import 'package:flutter/material.dart';
 2 
 3 void main() {
 4   runApp(new Application());
 5 }
 6 class Application extends StatefulWidget {
 7   @override
 8   _ApplicationState createState() => _ApplicationState();
 9 }
10 
11 class _ApplicationState extends State {
12   bool bval = false;
13   void method1(value) {
14     setState(() {
15       bval = value;
16     });
17   }
18   @override
19   Widget build(BuildContext context) {
20     return new MaterialApp(
21         title: 'a',
22         home: new Scaffold(
23           appBar: new AppBar(
24             title: new Text("a"),
25             backgroundColor: Colors.green,
26           ),
27           body: new Center(
28             child: new Column(
29               mainAxisAlignment: MainAxisAlignment.center,
30               children: [
31                 new Switch(
32                   value: bval,
33                   onChanged: (bool val) {
34                     method1(val);
35                   },
36                 )
37               ],
38             ),
39           ),
40         )
41     );
42   }
43 }

7.listView

class _ApplicationState extends State {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'dummy application',
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text('List widget'),
          ),
          body: new ListView(
            children: [
              new ListTile(
                title: new Text('item 1dd'),
                trailing: new Icon(Icons.arrow_forward),
              ),
              new ListTile(
                title: new Text('item 2'),
                trailing: new Icon(Icons.arrow_forward),
              ),
              new ListTile(
                title: new Text('item 3'),
                trailing: new Icon(Icons.arrow_forward),
              ),
            ],
          ),
        )
    );
  }
}

tips: listview的title属性可以设置InputFiled实现登录框

 


推荐阅读
author-avatar
mobiledu2502913627
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有