让前端开发者失业的技术，Flutter Web初体验

第二步，在Home类中，是我们要渲染的页面顶导，运用了AppBar组件，它包括了一个居中的页面标题和居右的搜索按钮。文本可以像css一样设置外观样式。

class Home extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      backgroundColor: Colors.white, 
      appBar: AppBar( 
        backgroundColor: Colors.white, 
        elevation: 0.0, 
        centerTitle: true, 
        title: Text( // 中心文本 
          "下载页", 
          style: 
              TextStyle(color: Colors.black, fontSize: 16.0, fontWeight: FontWeight.w500), 
        ), 
// 搜索图标及特性 
        actions: <Widget>[  
          Padding( 
            padding: const EdgeInsets.symmetric(horizontal: 20.0), 
            child: Icon( 
              Icons.search, 
              color: Colors.black, 
            ), 
          ) 
        ], 
      ), 
//调用body渲染类，此处可以添加多个方法调用 
      body: Stack( 
        children: [ 
            Body()  
        ], 
      ), 
    ); 
  } 
} 

第三步，创建页面主体内容，一张图加多个文本，使用了文本组件和图片组件，页面结构采用了flex布局，由于两个Expanded的Flex值均为1，因此将在两个组件之间平均分配空间。SizedBox组件相当于一个空盒子，用来设置margin的距离

class Body extends StatelessWidget { 
  const Body({Key key}) : super(key: key); 
 
  @override 
  Widget build(BuildContext context) { 
    return Row( 
      crossAxisAlignment: CrossAxisAlignment.stretch, 
      mainAxisAlignment: MainAxisAlignment.spaceBetween, 
      children: <Widget>[ 
        Expanded( // 左侧 
          flex: 1, 
          child: Image.asset(// 图片组件 
            "background-image.jpg", // 这是一张在web/asserts/下的背景图 
            fit: BoxFit.contain, 
          ), 
        ), 
        const SizedBox(width: 90.0), 
        Expanded( // 右侧 
          flex:1, 
          child: Column( 
            mainAxisAlignment: MainAxisAlignment.center, 
            crossAxisAlignment: CrossAxisAlignment.start, 
            children: <Widget>[ 
              Text( // 文本组件 
                "腾讯新闻", 
                style: TextStyle( 
                    color: Colors.black, fontWeight: FontWeight.w600, fontSize: 50.0, fontFamily: 'Merriweather'), 
              ), 
              const SizedBox(height: 14.0),// SizedBox用来增加间距 
              Text( 
                "腾讯新闻是腾讯公司为用户打造的一款全天候、全方位、及时报道的新闻产品，为用户提供高效优质的资讯、视频和直播服务。资讯超新超全，内容独家优质，话题评论互动。", 
                style: TextStyle( 
                    color: Colors.black, fontWeight: FontWeight.w400, fontSize: 24.0, fontFamily: "Microsoft Yahei"), 
                textAlign: TextAlign.justify, 
              ), 
              const SizedBox(height: 20.0),  
              FlatButton( 
                onPressed: () {}, // 下载按钮的响应事件 
                color: Color(0xFFCFE8E4), 
                shape: RoundedRectangleBorder( 
                  borderRadius: BorderRadius.circular(16.0), 
                ), 
                child: Padding( 
                  padding: const EdgeInsets.all(12.0), 
                  child: Text("点击下载", style: TextStyle(fontFamily: "Open Sans")), 
                ), 
              ), 
            ], 
          ), 
        ), 
        const SizedBox(width: 100.0), 
      ], 
    ); 
  } 
} 

到此，页面创建结束，保存，运行webdev serve，就可以看到效果了。

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!