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 }

  • 相关阅读:
    Unity shader之金属质感衣服
    Unity之如何使用夜神模拟器logcat
    Unity XLua之协程
    Unity shader之ColorMask
    NGUI之实现连连看小游戏
    NGUI之使用UISprite画线
    Unity如何退出游戏
    c#之AES加密解密
    Unity shader学习之屏幕后期处理效果之高度雾,重建world pos方法2
    Unity shader学习之屏幕后期处理效果之高度雾,重建world pos方法1
  • 原文地址:https://www.cnblogs.com/CMirs/p/14389452.html
Copyright © 2011-2022 走看看