Flutter-基础控件相关[1]

Flutter相关文档

常用基础控件

不管在哪个前端平台，常用的基础控件都一样，大致包括：文本、图片、按钮、输入框、进度条、单选框和复选框、开关切换(Switch)、提示窗、对话框；布局用的控件(Layout)基本包含：横向布局、纵向布局、格子布局、重叠布局、各类包含不同约束条件的特定布局(内外间距，靠边居中，相对位置等)；然后是一些根据常用程度封装的控件包括：列表控件、滑动控件(横纵方向)，下拉刷新，抽屉(Drawer)等。

在Flutter中，控件分为StatefulWidget和StatelessWidget(有状态控件和无状态控件)，无状态控件是死的，不会动态更新，所以实际使用的时候大多数情况下都是封装自己的StatefulWidget，StatefulWidget的状态存储在对应的State类里面，需要更新的时候可以通过调用setState()方法来刷新页面。

StatefulWidget基本代码模板如下:

class DemoStatefulWidget extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return DemoState();
  }
}

class DemoState extends State<DemoStatefulWidget>{
  var data;
  @override
  Widget build(BuildContext context) {
    return Text(data);
  }

  void onDataChanged(newData){
    setState(() {//刷新控件
      data = newData;
    });
  }
}

接下来，按照上面梳理出的常用控件，我们一个一个来看。

文本 Text

官方文档

Widget build(BuildContext context) {
    retur Text(
      "A text in container",
      style: new TextStyle(
          color: Color(0xFF0000CD), fontStyle: FontStyle.normal, fontSize: 15),
    );
  }

图片 Image

Image官方文档
基本使用

Widget build(BuildContext context) {
    return Image.network(//图片来自网络
      imageUrl,
      width: 200.0,
      height: 150.0,
    );
  ///    Image.asset(name);//图片来自项目内的资源
  ///    Image.file(file);//图片来自文件
  ///    Image.memory(bytes);//图片来自内存
  }

按钮 TextButton

Widget build(BuildContext context) {
    return TextButton(
      child: const Text('这是个按钮'),
      onPressed: () {},
    );
  }