让前端开发者失业的技术，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，就可以看到结果了。

（编辑：湖南网）

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