Flutter——Widget示例，WidgetImage，Icon(Botton)Widget,ListView Widget
作业要求：
扩充如下代码，参照Text Widget演示示例代码形式，实现主页面列表中Image Widget、Icon Widget、IconButton Widget、RaisedButton Widget以及horizontal ListView Widget示例演示。
//main.dart import 'package:flutter/material.dart'; import 'text_widget.dart'; 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( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue, // This makes the visual density adapt to the platform that you run // the app on. For desktop platforms, the controls will be smaller and // closer together (more dense) than on mobile platforms. visualDensity: VisualDensity.adaptivePlatformDensity, ), // 在MaterialApp下引入一个名为WidgetList子widget，让Navigator调用该子widget的context去找响应跳转的widget home: WidgetList(title: 'Widgets demo') ); } } // flutter Navigator operation requested with a context that does not include a Navigator. // https://www.cnblogs.com/edensyd/p/11595053.html class WidgetList extends StatelessWidget { final String title; WidgetList({Key key, this.title}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: ListView( children: <Widget>[ ListTile( leading: Icon(Icons.text_format), title: Text('Text Widget'), onTap: () { Navigator.push(context, MaterialPageRoute( builder: (context) => TextWidgetDemo(), )); }, ), ListTile( leading: Icon(Icons.image), title: Text('Image Widget'), ), ListTile( leading: Icon(Icons.block), title: Text('Icon, IconButton and RaisedButton Widget'), ), ListTile( leading: Icon(Icons.list), title: Text('ListView Widget'), ), ListTile( leading: Icon(Icons.arrow_forward), title: Text('Text Widget'), ), ListTile( leading: Icon(Icons.arrow_right), title: Text('Text Widget'), ), ListTile( leading: Icon(Icons.arrow_forward), title: Text('Text Widget'), ), ListTile( leading: Icon(Icons.arrow_right), title: Text('Text Widget'), ), ListTile( leading: Icon(Icons.arrow_forward), title: Text('Text Widget'), ), ListTile( leading: Icon(Icons.arrow_right), title: Text('Text Widget'), ), ListTile( leading: Icon(Icons.arrow_forward), title: Text('Text Widget'), ), ListTile( leading: Icon(Icons.arrow_right), title: Text('Text Widget'), ), ListTile( leading: Icon(Icons.arrow_forward), title: Text('Text Widget'), ), ], ), ); } } //text_widget.dart import 'package:flutter/material.dart'; class TextWidgetDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Text Widget'), ), body: Column( // Column的crossAxisAlignment默认为center crossAxisAlignment : CrossAxisAlignment.start, children: <Widget>[ SizedBox(height: 40.0), Text( '红色， 黑色删除线， 32号', style: TextStyle( color: const Color(0xffff0000), decoration: TextDecoration.lineThrough, decorationColor: const Color(0xff000000), fontSize: 24 ), ), SizedBox(height: 40.0), Text( '橙色， 下划线， 24号', style: TextStyle( color: const Color(0xffff9900), decoration: TextDecoration.underline, fontSize: 24 ), ), SizedBox(height: 40.0), Text( '虚线上划线， 24号， 倾斜', style: TextStyle( decoration: TextDecoration.overline, decorationStyle: TextDecorationStyle.dashed, fontSize: 24, fontStyle: FontStyle.italic ), ), SizedBox(height: 40.0), Text( '24号， 加粗', style: TextStyle( fontSize: 24, fontStyle: FontStyle.italic, fontWeight: FontWeight.bold, letterSpacing:6.0 ), ), SizedBox(height: 40.0), ], ), ); } }
要求：
（1）Image Widget用一个页面演示，演示代码包括Image.network()和Image.asset()的使用示例代码，如图1所示。
（2）Icon Widget、IconButton Widget、RaisedButton Widget用一个页面演示。
（3）horizontal ListView Widget用一个页面演示，用Container()构建的颜色块来组成水平方向的构件，如图2、图3、图4所示。
（4）在main.dart文件中加上对应的列表项导航事件，使之点击后导航到对应的示例演示页面。
（5）项目的目录结构类似图5所示。
（6）提交的结果包括新建的3各示例页面（插入页面截图到答案框内）以及页面对应的代码（以“粘贴为纯文本”的方式粘贴到答案框内，注意代码简洁清晰，添加适当的注释）。
项目结构：
作业项目源代码：
Image_widget.dart
import 'package:flutter/material.dart'; class ImageWidgetDemo extends StatelessWidget{ @override Widget build(BuildContext context){ return Scaffold( appBar: AppBar( title: Text('Image Widget Demo'), ), body: Column( crossAxisAlignment : CrossAxisAlignment.center, children: <Widget>[ new Image.network( 'https://pic.downk.cc/item/5f7bc8d2160a154a67d7493e.jpg', fit: BoxFit.fill, //拉伸和挤伸 ), Text( 'Image.network\nhttps://pic.downk.cc/item/5f7bc8d2160a154a67d7493e.jpg', textAlign: TextAlign.center, ), Image.asset('assets/Tokyo.jpg'), Text( 'Image.asset\nassets/Tokyo.jpg', textAlign: TextAlign.center, ), ], ), ); } }
button_widget.dart
import 'package:flutter/material.dart'; class ButtonWidgetDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar( title: Text('Image Widget Demo'), ), body: Center( child: ListView( children: <Widget>[ Text('RaisedButton:', textAlign: TextAlign.center,), RaisedButton( onPressed: () {}, //点击事件 child: Text('RaisedButton'), //按键文本 elevation: 20, //按钮的阴影部分 ), Text('IconButton:', textAlign: TextAlign.center,), IconButton( icon: Icon(Icons.star), onPressed: () {}, color: Colors.blueAccent, highlightColor: Colors.red, ), Text('Icon:', textAlign: TextAlign.center,), Icon( Icons.restaurant, size: 100, color: Colors.deepOrange, textDirection: TextDirection.ltr, ), ], ), ), ); } }
list_View_widget.dart
import 'package:flutter/material.dart'; class HorizontalWidgetDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar( title: Text('Image Widget Demo'), ), body: Container( height: 100, child: ListView( scrollDirection: Axis.horizontal, children: <Widget>[ Container( color: Colors.red, width: 100, ), Container( color: Colors.blue, width: 100, ), Container( color: Colors.amber, width: 100, ), Container( color: Colors.red, width: 100, ), Container( child: Text('初音green'), color: Color.fromARGB(1023, 57, 197, 187), width: 100, ), Container( color: Colors.transparent, width: 100, child: Column( children: [ IconButton( icon: Icon(Icons.home), onPressed: () {}, color: Colors.blueAccent, highlightColor: Colors.green, ), Text('button'), ], ), ), Container( child: Text('天依blue'), color: Color.fromARGB(1023, 102, 204, 255), width: 100, ), Container( color: Colors.blue, width: 100, ), Container( color: Colors.amber, width: 100, ), ], ), ), ); } }
效果示意图：
