Flutter 应用 Widget(二)

本篇文章将介绍Flutter的一些常用控件

首先是写下我们的主页面布局

import 'package:flutter/material.dart';
import 'dart:math';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter rolling demo'),
          ),
          body: Center(
            child: ImageWidget(),   // 改变child里面的相应控件 看相应的效果
          ),
        ));
  }
}

class TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      "Put your text here dddddd",
      style: TextStyle(
          color: Colors.blue,
          fontSize: 16.0,
          fontWeight: FontWeight.bold
      ),
    );
  }
}

class ImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.network(
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539766773943&di=4ebf97fa06db7acdb69045e60a15fc57&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F9cee584be54d5808b0e3b0f92971499b7cad9c52.jpg",
      width: 200.0,
      height: 150.0,
    );
  }
}

}

 下面将暂时不同的Widget

（一） Text

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      "Put your text here",
      style: TextStyle(
        color: Colors.blue,
        fontSize: 16.0,
        fontWeight: FontWeight.bold
      ),
    );
  }
}

（二） Image

class ImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.network(
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539766773943&di=4ebf97fa06db7acdb69045e60a15fc57&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F9cee584be54d5808b0e3b0f92971499b7cad9c52.jpg",
      width: 200.0,
      height: 150.0,
    );
  }
}

//文档里Image提供4个取图方式
Image.asset(name);
Image.file(file);
Image.memory(bytes);
Image.network(src);

（三）按钮

Flutter 提供了两个基本的按钮控件：FlatButton 和 RaisedButton

class ButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var flatBtn = FlatButton(
      onPressed: () => print('FlatButton pressed'),
      child: Text('BUTTON'),
    );
    var raisedButton = RaisedButton(
      onPressed: () => print('RaisedButton pressed'),
      child: Text('BUTTON'),
    );
    return flatBtn;
  }
}

（四）文本输入框

相比react-native ，flutter的文本输入框能自动弹起

class MessageForm extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MessageFormState();
  }
}

class _MessageFormState extends State<MessageForm> {
  var editController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    // Row、Expand 都是用于布局的控件
    // TODO: implement build
    return Row(
      children: <Widget>[
        Expanded(
          child: TextField(
            controller: editController,
          ),
        ),
        RaisedButton(
          child: Text("click"),
          onPressed: () => print('text inputted: ${editController.text}'),
        )
      ],
    );
  }

布局——Container、Padding 和 Center

Flutter 里面所有的东西都是 Widget，所以，布局也是 Widget。

/// 布局 Flutter 里面所有的东西都是 Widget，所以，布局也是 Widget。
/// 控件 Container 可以让我们设置一个控件的尺寸、背景、margin 等
class ContainerWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Text('文本信息'),
      padding: EdgeInsets.all(8.0),
      margin: EdgeInsets.all(4.0),
      width: 80.0,
      decoration: BoxDecoration(
        color: Colors.grey,
        borderRadius: BorderRadius.circular(5.0)
      ),
    );
  }
}

///如果我们只需要 padding，可以使用控件 Padding：
class PaddingWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: Text('text'),
    );
  }
}

///Center 就跟它的名字一样，把一个控件放在中间：
class CenterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8.0),
      margin: EdgeInsets.all(4.0),
      width: 200.0,
      height: 200.0,
      decoration: BoxDecoration(
        // 背景色
        color: Colors.grey,
        // 圆角
        borderRadius: BorderRadius.circular(5.0),
      ),

      // 把文本放在 Container 的中间
      child: Center(
        child: Text('text'),
      ),
    );
  }
}

我们经常说，Flutter 里面所有的东西都是 Widget，所以，布局也是 Widget。水平布局我们可以使用 Row，竖直布局使用 Column。

Expand 一行按比例占位

class ExpandWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          // 占一行的 2/3
          flex: 2,
          child: RaisedButton(child: Text('btn1'),),
        ),
        Expanded(
          // 占一行的 1/3
          flex: 1,
          child: RaisedButton(child: Text('btn2'),),
        ),
      ],
    );
  }
}

 Stack 布局

class StackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Text('foobar'),
        Text('barfoo'),
      ],
    );
  }
}

 

Flutter的布局方法

重点是什么?

• Widgets 是用于构建UI的类.
• Widgets 用于布局和UI元素.
• 通过简单的widget来构建复杂的widget

Flutter布局机制的核心就是widget。在Flutter中，几乎所有东西都是一个widget - 甚至布局模型都是widget。您在Flutter应用中看到的图像、图标和文本都是widget。 甚至你看不到的东西也是widget，例如行（row）、列（column）以及用来排列、约束和对齐这些可见widget的网格（grid）。

 

github传送门