flutter框架一文通(二)

finedayforu

298人浏览 · 2020-02-11 00:29:37

finedayforu · 2020-02-11 00:29:37 发布

(xu)第三部分 StatefulWidget 带界面改变交互的组件

三十五. FittedBox //自适应填充盒模型

此盒子允许他的子组件有自适应性

        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "TEST",
      home: Scaffold(
        appBar: AppBar(title: Text("FittedBox")),
        body: Column(
          children: <Widget>[
            Container(
              width: 200,
              height: 100,
              color: Colors.greenAccent,
              child: FittedBox(
                fit: BoxFit.fill,
                alignment: Alignment.center,
                child: Text("使用fill模式自适应"),
              ),
            )
          ],
        ),
      ),
    );
  }
}

三十六. OverflowBox //允许溢出的盒模型

此盒子允许他的子组件溢出

三十七. RotatedBox //允许旋转盒模型

此盒子允许他的子组件旋转,会顺时针旋转 quarterTurns × 90°

注意data的方向

三十八. SizedBox //限定大小的盒模型

        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "TEST",
      home: Scaffold(
        appBar: AppBar(title: Text("RotatedBox")),
        body: SizedBox(
            width: 200,
            height: 200,
            child: Container(
              width: 400,
              height: 100,
              color: Colors.blue,
            )),
      ),
    );
  }
}

子组件设置了宽高,但不管用了

三十九. FlatButton //扁平按钮组件

        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "TEST",
      home: Scaffold(
        appBar: AppBar(title: Text("FlatButton")),
        body: Center(
          child: Column(
            children: <Widget>[
              FlatButton(
                child: Text("data"),
                colorBrightness: Brightness.dark,
                onHighlightChanged: (n) {},
                onPressed: () {},
                onLongPress: () {},
                color: Colors.pinkAccent,
              ),
              FlatButton.icon(
                  color: Colors.amberAccent,
                  onPressed: () {},
                  icon: Icon(Icons.history),
                  label: Text("null")),
            ],
          ),
        ),
      ),
    );
  }
}

四十. IconButton //图标按钮组件

四十一 OutlineButton //外边线按钮组件

四十二. RawMaterialButton //原始按钮组件

四十三. GridTile //网格瓦片

四十四. GridTileBar//GridTile的导航条

四十五. GridPaper //带图纸格的网格瓦片

        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "TEST",
        home: Scaffold(
          appBar: AppBar(title: Text("GridTile组件")),
          body: Page1(),
        ));
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      mainAxisSpacing: 10.0,
      crossAxisSpacing: 4,
      padding: EdgeInsets.all(4),
      children: <Widget>[
        GridTile(
          header: GridTileBar(
            leading: Icon(Icons.ac_unit),
            title: Text("这是个GridTile"),
            subtitle: Text("这是个GridTileBar"),
            trailing: Icon(Icons.queue),
            backgroundColor: Colors.amber,
          ),
          child: Image.network(
              "http://5b0988e595225.cdn.sohucs.com/images/20180703/9816cbfecebf42478739877b5aa2c712.gif"),
          footer: Text("footer也可以添加GridTileBar"),
        ),
        GridPaper(
          color: Colors.red,
          interval :200,//网格大小
          divisions :2,//每个网格分成几份
          subdivisions :5,//每个小网格再分几份
          child: Image.asset('images/4.jpg'),
        ),
        Image.asset('images/2.jpg'),
        Image.asset('images/3.jpg'),
        Image.asset('images/1.jpg'),
        Image.asset('images/5.jpg'),
        Image.asset('images/7.jpg'),
        Image.asset('images/8.jpg'),
      ],
    );
  }
}

第四部分 StatefulWidget 带界面改变交互的组件

三. 下拉按钮组件

        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "TEST",
      home: Scaffold(
        appBar: AppBar(title: Text("DropdownButDemo")),
        body: Center(
          child: DropdownButDemo(),
        ),
      ),
    );
  }
}

class DropdownButDemo extends StatefulWidget {
  @override
  _DropdownButDemoState createState() => _DropdownButDemoState();
}

class _DropdownButDemoState extends State<DropdownButDemo> with SingleTickerProviderStateMixin {
  int _cureentValue=1;
  List<DropdownMenuItem> dropItemsList(){
    final List<DropdownMenuItem> mitems=List();
    final DropdownMenuItem item1 =DropdownMenuItem(child: Text("book"),value: 1);
    final DropdownMenuItem item2 =DropdownMenuItem(child: Text("shop"),value: 2);
    final DropdownMenuItem item3 =DropdownMenuItem(child: Text("cake"),value: 3);
    final DropdownMenuItem item4 =DropdownMenuItem(child: Text("bank"),value: 4);
    mitems.add(item1);
    mitems.add(item2);
    mitems.add(item3);
    mitems.add(item4);
    return mitems;
  }
  @override
  Widget build(BuildContext context) {
    return DropdownButton(
      value: _cureentValue,
      items: dropItemsList(),//下拉列表
      hint: Text("请下拉"),//提示文本
      iconSize: 48,//图标大小
      elevation: 10,//阴影
      isExpanded: true,//继承父容器的大小
      focusColor: Colors.redAccent, //获得焦点的颜色
      iconEnabledColor: Colors.amber,//按钮可用时的颜色
      iconDisabledColor: Colors.grey,//按钮不可用时的颜色
      icon: Icon(Icons.keyboard_arrow_down),
      style: TextStyle(fontSize: 30,color: Colors.black54,),//字体样式
      isDense:true,
      itemHeight:80,
      autofocus: true,
      onChanged: (T){
        setState((){
          _cureentValue=T;
        });
      }, 
    );
  }
}

四. Checkbox打勾组件

        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "TEST",
        home: Scaffold(
          appBar: AppBar(title: Text("FlatButton")),
          body: Demo(),
        ));
  }
}

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  bool _currentValue = false;
  @override
  Widget build(BuildContext context) {
    return Checkbox(
      tristate: false, //可不可以为null
      value: _currentValue,
      activeColor: Colors.amber,
      checkColor: Colors.red,
      focusColor: Colors.red,
      hoverColor: Colors.red,

      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      onChanged: (t) {
        setState(() {
          _currentValue = t;
        });
      },
    );
  }
}

五. CheckboxListTile //打勾瓦片组件

        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "TEST",
        home: Scaffold(
          appBar: AppBar(title: Text("FlatButton")),
          body: Demo(),
        ));
  }
}

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  bool value = false;
  List<bool> _currentValue = [false, false, false, false];
  void _valueChange(t) {
    setState(() {
      value=t;
      for (int i = 0; i < _currentValue.length; i++) {
        _currentValue[i] = t;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        CheckboxListTile(
          isThreeLine: false, //是否三行显示,一般选false
          title: Text("选中所有"), //标题
          dense: false, //紧凑布局
          selected: true,
          controlAffinity: ListTileControlAffinity.trailing,
          value: value,
          onChanged: _valueChange,
        ),
        CheckboxListTile(
          isThreeLine: false, //是否三行显示,一般选false
          title: Text("杨玉环"), //标题
          subtitle: Text("女,18岁"), //副标题
          dense: false, //紧凑布局
          selected: true,
          controlAffinity: ListTileControlAffinity.platform,
          secondary: Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581360787949&di=2075de533e3f6802d2b8f566e2cccc47&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180830%2F22%2F1535639077-NaJgkzElOK.jpg"),
          value: _currentValue[0],
          onChanged: (t) {
            setState(() {
              _currentValue[0] = t;
            });
          },
        ),
        CheckboxListTile(
          isThreeLine: false, //是否三行显示,一般选false
          title: Text("西施"), //标题
          subtitle: Text("女,18岁"), //副标题
          dense: false, //紧凑布局
          selected: true,
          controlAffinity: ListTileControlAffinity.trailing,
          secondary: Image.network(
              "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3182256423,1717147835&fm=11&gp=0.jpg"),
          value: _currentValue[1],
          onChanged: (t) {
            setState(() {
              _currentValue[1] = t;
            });
          },
        ),
        CheckboxListTile(
          isThreeLine: false, //是否三行显示,一般选false
          title: Text("王昭君"), //标题
          subtitle: Text("女,18岁"), //副标题
          dense: false, //紧凑布局
          selected: true,
          controlAffinity: ListTileControlAffinity.trailing,
          secondary: Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581359280191&di=7a5561c54cdebbd1c086e20fff74cb69&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180802%2F03%2F1533152912-BmPIzdDxuT.jpg"),
          value: _currentValue[2],
          onChanged: (t) {
            setState(() {
              _currentValue[2] = t;
            });
          },
        ),
        CheckboxListTile(
          isThreeLine: false, //是否三行显示,一般选false
          title: Text("貂蝉"), //标题
          subtitle: Text("女,18岁"), //副标题
          dense: false, //紧凑布局
          selected: true,
          controlAffinity: ListTileControlAffinity.trailing,
          secondary: Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581360805579&di=a766843271f7c675f0fcacbafd78756c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201409%2F25%2F20140925221655_vX8Z4.thumb.1000_0.jpeg"),
          value: _currentValue[3],
          onChanged: (t) {
            setState(() {
              _currentValue[3] = t;
            });
          },
        ),
      ],
    );
  }
}

六. Chip //小标签组件

        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "TEST",
        home: Scaffold(
          appBar: AppBar(title: Text("Chip组件")),
          body: Demo(),
        ));
  }
}

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  List<String> _tag=["android","IOS","Win","linux"];
  @override
  Widget build(BuildContext context) {
    return Column(
      children: _tag.map((tag) { //这里用map().toList函数生成chip组件
        return Chip(
          label: Text(tag),
          avatar: CircleAvatar(
            child: Icon(Icons.desktop_mac),
          ),
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          onDeleted: (){
            setState(() {
              _tag.remove(tag);
            });
          },
        );
      }).toList(),
    );
  }
}

七.ActionChip //可交互小标签

和上面的组件用法基本一致,交互动作改为了onPress.

多了tooltip 少了delete相关的属性

        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "TEST",
        home: Scaffold(
          appBar: AppBar(title: Text("Chip组件")),
          body: Demo(),
        ));
  }
}

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  List<String> _tag = ["android", "IOS", "Win", "linux"];
  @override
  Widget build(BuildContext context) {
    return Column(
      children: _tag.map((tag) {
        return ActionChip(
          label: Text(tag),
          avatar: CircleAvatar(
            child: Icon(Icons.desktop_mac),
          ),
          materialTapTargetSize: MaterialTapTargetSize.padded,
          onPressed: () {
            setState(() {
              Scaffold.of(context).removeCurrentSnackBar();
              Scaffold.of(context).showSnackBar(SnackBar(content: Text(tag)));
            });
          },
        );
      }).toList(),
    );
  }
}

八. FilterChip //过滤小标签

过滤小标签特色是有一个属性叫select,有一个动作叫onSelected()

所以是可以打勾的.

        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "TEST",
        home: Scaffold(
          appBar: AppBar(title: Text("ActionChip组件")),
          body: Demo(),
        ));
  }
}

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  List<String> _tag = ["android", "IOS", "Win", "linux"];
  List<String> _selected = [];
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Center(child: Text(_selected.toString())),
        Column(
          children: _tag.map((tag) {
            return FilterChip(
              selected: _selected.contains(tag),
              label: Text(tag),
              avatar: CircleAvatar(
                child: Icon(Icons.desktop_mac),
              ),
              materialTapTargetSize: MaterialTapTargetSize.padded,
              onSelected: (value) {
                setState(() {
                  if (_selected.contains(tag)) {
                    _selected.remove(tag);
                  } else {
                    _selected.add(tag);
                  }
                });
              },
            );
          }).toList(),
        )
      ],
    );
  }
}

九. ChoiceChip //允许从一组选项中进行单一选择

同FilterChip,只是selected风格不一样

例:单选

        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "TEST",
        home: Scaffold(
          appBar: AppBar(title: Text("ActionChip组件")),
          body: Demo(),
        ));
  }
}

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  List<String> _tag = ["android", "IOS", "Win", "linux"];
  String _selected;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Center(child: Text(_selected.toString())),
        Column(
          children: _tag.map((tag) {
            return ChoiceChip(
              selected: tag == _selected,
              label: Text(tag),
              avatar: CircleAvatar(
                child: Icon(Icons.desktop_mac),
              ),
              materialTapTargetSize: MaterialTapTargetSize.padded,
              onSelected: (value) {
                setState(() {
                  _selected = tag;
                });
              },
            );
          }).toList(),
        )
      ],
    );
  }
}

十 AboutDialog //关于对话框

        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "TEST",
        home: Scaffold(
          appBar: AppBar(title: Text("AboutDialog组件")),
          body: Page1(),
        ));
  }
}

void myAboutDialog(context) {
  showDialog(
      context: context,
      builder: (_) => AboutDialog(
            applicationIcon: Icon(Icons.ac_unit),
            applicationName: "MyApp",
            applicationVersion: "v0.0.1",
            applicationLegalese: "@oliver,@google",
          ));
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
          child: Text("关于"),
          onPressed: () {
            myAboutDialog(context
            );
          }),
    );
  }
}

十一 SimpleDialog //选择对话框

        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "TEST",
        home: Scaffold(
          appBar: AppBar(title: Text("SimpleDialog组件")),
          body: Page1(),
        ));
  }
}

void mySimpleDialog(context)  {
  showDialog(
      context: context,
      builder: (context) => SimpleDialog(
            title: Text("data"),
            children: <Widget>[
              SimpleDialogOption(
                child: Text("选项1"),
                onPressed: () {
                  Navigator.of(context).pop(context);
                },
              ),
              SimpleDialogOption(
                child: Text("选项2"),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
              SimpleDialogOption(
                child: Text("选项3"),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          ));
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
          child: Text("关于"),
          onPressed: () {
            mySimpleDialog(context);
          }),
    );
  }
}

十二 AlertDialog //报警组件

        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "TEST",
        home: Scaffold(
          appBar: AppBar(title: Text("AlertDialog组件")),
          body: Page1(),
        ));
  }
}

void mySimpleDialog(context) {
  showDialog(
      context: context,
      builder: (context) => AlertDialog(
            title: Text("温馨提示"),
            titlePadding: EdgeInsets.all(15),
            semanticLabel: "??",
            content: Text("您的余额不足!请您滚一边去!谢谢!!!"),
            actions: <Widget>[
              FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text("确定")),
              FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text("取消"))
            ],
          ));
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
          child: Text("关于"),
          onPressed: () {
            mySimpleDialog(context);
          }),
    );
  }
}

十三.

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

从 Web 到 OpenHarmony：用 ArkTS + ArkWeb 承载本地 RISC-V 教学应用

开源鸿蒙跨平台开发者社区

Flutter 鸿蒙化实战：flutter_wakelock 适配 OpenHarmony，四行代码让屏幕常亮

随着鸿蒙生态的快速发展，越来越多的 Flutter 应用需要适配 OpenHarmony 平台。但生态早期，大量常用三方库只有 Android / iOS 实现，鸿蒙侧只能自己造轮子。为了解决这个问题，对一批高频使用的 Flutter 三方库做了 OpenHarmony 平台适配，统一托管在 GitCode 的下，全部通过 TAG 版本隔离、配套门禁编译验证，开箱即用。本篇是系列文章之一，主角是—