10 Flutter wrap图片组件

最新推荐文章于 2022-11-21 21:55:36 发布

LJLThomson

最新推荐文章于 2022-11-21 21:55:36 发布

阅读量121

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/LJLThomson/article/details/115402369

版权

Flutter 专栏收录该内容

70 篇文章 12 订阅

订阅专栏

Wrap组件

1.属性

在这里插入图片描述

direction:方向

runSpacing:direction为横向，则为行间距，direction为纵向，则为列间距

runAlignment:主轴方向内容位置，

wrap：几乎等价于Android中FlowLayout

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) { 
    return MaterialApp(
        home: Scaffold(
        appBar: AppBar(title: Text('FlutterDemo')),
        body: LayoutDemo(),
      ));
  }
}
class LayoutDemo extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 600,
      width: 400,
      color: Colors.pink,
      margin: EdgeInsets.fromLTRB(10, 30, 5, 0),
      padding: EdgeInsets.all(10),
      child: Wrap(
          spacing:10,
          runSpacing: 10,
          direction: Axis.vertical,
          alignment:WrapAlignment.spaceEvenly,
          // runAlignment: WrapAlignment.center,
          runAlignment: WrapAlignment.end,
          children: <Widget>[
                MyButton("第1章"),
                MyButton("第2章"),
                MyButton("第3章"),
                MyButton("第4章"),
                MyButton("第5章"),
                MyButton("第6章"),
                MyButton("第7章"),
                MyButton("第8章"),
                MyButton("第9章"),
                MyButton("第10章"),
                MyButton("第11章"),
                 MyButton("第3章"),
                MyButton("第4章"),
                MyButton("第5章"),
                MyButton("第6章"),
                MyButton("第7章"),
                MyButton("第8章"),
                MyButton("第9章"),
                MyButton("第10章"),
                MyButton("第11章"),
          ],
        ),
    );
  }
}

class MyButton extends StatelessWidget{
  final String text;
  const MyButton(this.text,{Key key}) : super(key: key); 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      child: Text(this.text),
      textColor:Theme.of(context).accentColor,
      onPressed: (){        
      }
    );
  }
}