基础Widget的使用

MaterialApp

类似于UINavigationController 能管理控制页面的跳转
同时可以设置主题

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 取消界面左上角的debug标识
      home: Home(),
      theme: ThemeData(
        //主题
        primaryColor: Colors.yellow,
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[80],
      appBar: AppBar(
        title: Text('Flutter_BaseWidget'),
      ),
    );
  }
}

显示效果如下

Text

普通的文本

class TextDemo extends StatelessWidget {
  final TextStyle _textStyle = TextStyle(
    fontSize: 16.0,
  );

  final String _title = 'Flutter';
  final String _user = 'Snow';

  @override
  Widget build(BuildContext context) {
    return Text(
      '《${_title} -- 副标题》 -- $_user \n测试一下Text文本显示；123321爱asdklsadkljasdklasd数据啊了肯定接口里撒娇的撒基督教asdsadasdasddadsadada撒旦教萨克劳动局啊来得及啦所多???Snow',
      textAlign: TextAlign.center,
      style: _textStyle,
      maxLines: 4, //最大行数
      overflow: TextOverflow.ellipsis, //多出部分显示...
    );
  }
}

显示效果

富文本

class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        text: 'Flutter文本Demo\n',
        style: TextStyle(
          fontSize: 30,
          color: Colors.black,
        ),
        children: <TextSpan>[
          TextSpan(
              text: 'Warlock',
              style: TextStyle(
                fontSize: 16,
                color: Colors.red,
              )),
          TextSpan(
              text: 'Snow',
              style: TextStyle(
                fontSize: 16,
                color: Colors.blue,
              )),
        ],
      ),
    );
  }
}

Container

类似于UIView
默认大小时根据子视图来设定的，如果没有子视图，就不会显示

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Row(
        children: <Widget>[
          Container(
            color: Colors.red,
            child: Icon(
              Icons.add,
              size: 45,
            ),
            padding: EdgeInsets.fromLTRB(30, 30, 30, 30),//内边距
            margin: EdgeInsets.all(10),//外边距
            width:200,
            height: 200,
          )
        ],
      ),
    );
  }
}