zoukankan      html  css  js  c++  java
  • 前端入门flutter--11Flutter 页面布局 Wrap组件

      飞流直下三千尺,疑是银河落九天,额,不对,是有个奶娃在山顶洒水。。。。。。

      咳,回归正题,在一些奇奇葩葩的需求里面有错乱视觉“美”,一般常规的布局很难快速满足需求,这时候该使出流水一般的布局,流布局了:

      

      

     1 import 'package:flutter/material.dart';
     2 import 'package:flutter_app1/res/listData.dart';
     3 void main(){
     4   runApp(MyApp());
     5 }
     6 
     7 class MyApp extends StatelessWidget{
     8   @override
     9   Widget build(BuildContext context) {
    10     // TODO: implement build
    11     return MaterialApp(
    12       home: Scaffold(
    13         appBar: AppBar(
    14           title: Text('页面布局 Wrap组件'),
    15         ),
    16         body: Mybody(),
    17       ),
    18       theme: ThemeData(primarySwatch: Colors.green),
    19     );
    20   }
    21 }
    22 //Wrap实现流布局
    23 class Mybody extends StatelessWidget{
    24   @override
    25   Widget build(BuildContext context) {
    26     // TODO: implement build
    27    return Container(
    28      padding: EdgeInsets.fromLTRB(10, 5, 10, 10),
    29      child:Wrap(
    30        //布局方向
    31        direction: Axis.horizontal,
    32      //  主轴间距
    33        spacing: 10,
    34      //  次轴间距
    35        runSpacing: 0,
    36        children: <Widget>[
    37          MyButton("隐式自选添加"),
    38          MyButton("音乐"),
    39          MyButton("电影"),
    40          MyButton("房产"),
    41          MyButton("新闻"),
    42          MyButton("新型病毒报道"),
    43          MyButton("抗击肺炎"),
    44          MyButton("小视屏"),
    45          MyButton("小游戏"),
    46        ],
    47      )
    48    );
    49   }
    50 }
    51 
    52 class MyButton extends StatelessWidget{
    53   final String text;
    54 
    55   const MyButton(this.text,{Key key}) : super(key: key);
    56   @override
    57   Widget build(BuildContext context) {
    58     // TODO: implement build
    59   //  RaisedButton用于实现按钮
    60     return RaisedButton(
    61         child: Text(this.text),
    62         textColor: Theme.of(context).accentColor,
    63         onPressed: (){}
    64         );
    65   }
    66 }

  • 相关阅读:
    mysql 无法连接提示 Authentication plugin &#39;caching_sha2_password&#39; cannot be loaded
    探究分析:快速对大量的数据转换为数组
    SQL Server like 字段
    InfluxDB从原理到实战
    Python学习日记(四十) Mysql数据库篇 八
    MySQL数据库基本操作
    ES入门宝典(详细截图版)
    NameNode &amp;&amp; Secondary NameNode工作机制
    MySQL 两张表关联更新(用一个表的数据更新另一个表的数据)
    mysql单个表拆分成多个表
  • 原文地址:https://www.cnblogs.com/CMirs/p/14389452.html
Copyright © 2011-2022 走看看