Flutter之基础Widget，一篇文章就够够的

Flutter 的核心设计思想便是:Everythind is a Widget。在flutter的世界里，包括views,view controllers,layouts等在内的概念都建立在Widget之上。widget是flutter功能的抽象描述。所以掌握Flutter的基础就是学会使用widget开始。

Text:创建一个Text文本

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("title"),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      "Android进阶之旅",
      style: TextStyle(
          fontSize: 20,
          color: Colors.teal
      ),
    );
  }
}

属性：

maxLines: 最大行数
overflow:超出显示方式
textAlign:文本对齐方式
style:文本样式，包括fontSize、color等

效果：

创建一个按钮

class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[

        FloatingActionButton(
          child: Text("+", style: TextStyle(fontSize: 30)),
          onPressed: () {
            print("FloatingActionButton Click");
          },
        ),

        RaisedButton(
          child: Text("RaisedButton"),
          onPressed: () {
            print("RaisedButton Click");
          },
        ),

        FlatButton(
          child: Text("FlatButton"),
          onPressed: () {
            print("FlatButton Click");
          },
        ),

        OutlineButton(
          child: Text("OutlineButton"),
          onPressed: () {
            print("OutlineButton Click");
          },
        ),

        RaisedButton(
          child: Text("登录",
            style: TextStyle(color:Colors.white),
          ),
          color: Colors.red,
          highlightColor: Colors.red[600],  //添加按下背景
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),  //设置圆角
          onPressed: () {
            print("登录");
          },
        )
      ],
    );
  }
}

效果：

图片Widget

Image组件属性：

const Image({
  ...
  this.width, //图片的宽
  this.height, //图片高度
  this.color, //图片的混合色值
  this.colorBlendMode, //混合模式
  this.fit,//缩放模式
  this.alignment = Alignment.center, //对齐方式
  this.repeat = ImageRepeat.noRepeat, //重复方式
  ...
})

加载项目资源图片：
首先，需要在项目中与lib创建平级的文件夹，比如images，然后将图片资源拷如images中。然后需要在pubspec.yaml文件中声明资源，比如：

  assets:
    - images/test.jpeg

加载本地图片代码：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("title"),
        ),
        body: Container(
          child: Image.asset(
            "images/test.jpeg",
            width: 100,
            height: 100,
            alignment: Alignment.topCenter,
          ),
          width: 300,
          height: 300,
        ),
      ),
    );
  }
}

效果：

加载网络资源图片：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("title"),
        ),
        body: Container(
          child: Image.network(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602884612610&di=99e5e92e7d3fd95d9c922f29c35f4b61&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F57a2a20321de9.jpg",
            alignment: Alignment.topCenter,
          ),
          width: 300,
          height: 300,
        ),
      ),
    );
  }

}

圆角图片：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("title"),
        ),
        body: Center(
          child: ClipRRect(
              borderRadius: BorderRadius.circular(20),
              child: Image.network(
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602884612610&di=99e5e92e7d3fd95d9c922f29c35f4b61&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F57a2a20321de9.jpg",
                alignment: Alignment.topCenter,
          )
          ),
        ),
      ),
    );
  }

}

效果：

TextFiled

TextField用于接收用户的文本输入。常用属性：

keyboardType键盘的类型，style设置样式，textAlign文本对齐方式，maxLength最大显示行数等等；
decoration：用于设置输入框相关的样式
icon：设置左边显示的图标
labelText：在输入框上面显示一个提示的文本
hintText：显示提示的占位文字
border：输入框的边框，默认底部有一个边框，可以通过InputBorder.none删除掉
filled：是否填充输入框，默认为false
fillColor：输入框填充的颜色
controller：
onChanged：监听输入框内容的改变，传入一个回调函数
onSubmitted：点击键盘中右下角的down时，会回调的一个函数
代码：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("title"),
        ),
        body: Center(
          child: TextField(
            decoration: InputDecoration(
              labelText: "userName",
              hintText: "请输入用户名",
              filled: true,
              fillColor: Colors.lightGreenAccent
            ),
            maxLines: 1,
            onChanged: (value) {

            },
            onSubmitted: (value) {

            },
          ),
        ),
      ),
    );
  }

}

效果：

Form

Form表单也是一个Widget，可以在里面放入我们的输入框。但是Form表单中输入框必须是FormField类型的。这里我们实现登录框的控件。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Form(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(
                    icon: Icon(Icons.people),
                    labelText: "userName"
                ),),
              TextFormField(
                decoration: InputDecoration(
                    icon: Icon(Icons.lock),
                    labelText: "passWord",
                ),
              ),
              Container(
                width: double.infinity,
                  height: 45,
                  child: RaisedButton(
                    child: Text("login",
                      style: TextStyle(color:Colors.white, fontSize: 17)
                    ),
                    highlightColor: Colors.lightGreen,
                    color: Colors.red,
                  ),
                margin: EdgeInsets.all(10),
              )
            ],
          ),
        ),
      )
    );
  }

}

效果：

参考

Flutter快速上车之Widget
Flutter(七)之Flutter的基础Widget
ListView&GirdView

Flutter之基础Widget，一篇文章就够够的

Text:创建一个Text文本

创建一个按钮

图片Widget

TextFiled

Form

参考