本文介绍: Row(水平布局)、Column垂直布局)、Stack(可重叠布局)、IndexedStack(单一显示重叠布局)、ListView(滚动列表

布局

基本布局

Row

代码

Row(
   crossAxisAlignment: CrossAxisAlignment.start,
   children: <Widget&gt;[
       new Text('1'),
       new Text('2'),
       new Text('3'),
   	],
)

常用参数

mainAxisAlignment
crossAxisAlignment
textBaseline
mainAxisSize
verticalDirection
textDirection

Column

代码

Column(
   crossAxisAlignment: CrossAxisAlignment.start,
   children: <Widget>[
       new Text('1'),
       new Text('2'),
       new Text('3'),
   	],
)

常用参数

mainAxisAlignment
crossAxisAlignment
mainAxisSize
verticalDirection
textDirection

Stack

代码

Stack(
  alignment: Alignment(-1.0,0.0),//等价于Alignment.centerLeft
  children: <Widget>[
    Positioned(child: Container(width: 100.0,height: 100.0,color: Colors.red,),),
    Positioned(child: Container(width: 90.0,height: 90.0,color: Colors.green,),),
    Positioned(child: Container(width: 80.0,height: 80.0,color: Colors.blue,),),
    new Text('-1,0ncenterLeft',textAlign: TextAlign.left,),
  ],
)

完整示例

Container(
    width: 200,
    height: 200,
    child: Stack(
        children: <Widget>[
        Positioned(
            // 若是不指定位置就是(0,0)
            // 若是不指定size就是viewsize
            // top: 50.0,
            // left: 50.0,
            child: Container(
                width: 200,
                height: 200,
            ),
        ),
        Positioned(
            top: 0.0,
            left: 190.0,
            child: Container(
            width: 10.0,
            height: 10.0,
            color: Colors.green,
            ),
        ),
        ],
    ),
);

常用参数

alignment
textDirection
fit
overflow

IndexedStack

代码

IndexedStack(
  sizing: StackFit.expand,
  index: 1,
  children: <Widget>[
    Positioned(child: Container(width: 100.0,height: 100.0,color: Colors.red,),),
    Positioned(child: Container(width: 130.0,height: 90.0,color: Colors.green,),),
    Positioned(child: Container(width: 80.0,height: 120.0,color: Colors.blue,),),
   ],
),

index就是children的length区间之中的值。
比如上面的代码,就只显示index为1的子widget,也就是第二个

常用参数

ListView

代码

/// 默认构造
ListView(
  children: [ 
    new Text('1'),
    Divider(),
    new Text('2'),
    Divider(),
    new Text('3'),
    Divider(),
  ],
),
/// ListView.builder()构造
final List<String> name = <String>['1','2','3',];
ListView.builder(
  itemCount: name.length,
  itemBuilder: (context, index) {
    return Text(name[index]);
  },
),
/// ListView.separated()构造
ListView.separated(
  itemBuilder: (context, index) {
    return Text(name[index]);
  },
  separatorBuilder: (context, index) {
    return Divider();//分割线
  },
  itemCount: name.length,
),
/// ListView.custom()
ListView.custom(
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) {
      return Text(name[index]);
    },
    childCount: name.length,
  ),
),

详细代码

var lv1 = ListView(
    //主轴滚动方向:垂直vertical,竖直horizontal ,默认为垂直vertical,
    scrollDirection: Axis.vertical,
    //是否反向 默认false,正常顺序从起始点开始正序true为从末尾开始排列
    reverse: false,
    //滚动控制器,默认为null
    controller:null,
    //是否强制滚动(顶部底部是否可以滚动),默认false,如果为true,Controller必须为null
    primary: false,
    //视图如何响应用户手势滑动,有内置实现强制可以滚动 const AlwaysScrollableScrollPhysics();和强制不可以滚动const ScrollPhysics(),可忽略primary属性
    physics: const AlwaysScrollableScrollPhysics(),
    //默认false,滚动视图在[滚动方向]中的范围是否应由正在查看的内容决定。
    shrinkWrap: true,
    //itempaddingpadding: const EdgeInsets.all(10.0),
    //item交叉轴方向的大小,默认自适应,vertical时为高度,horizontal时为高度
    itemExtent: 50.0,
    //是否自动保存滑出屏幕外的字widget的状态,保证widget不被回收,可复用false的手动保存。默认为true
    addAutomaticKeepAlives: true,
    //是否放置重绘列表中,复杂widget可提高性能,默认为true
    addRepaintBoundaries: true,
    //缓存区大小,默认为250
    cacheExtent: 250.0,
    //默认构造函数中特有,直接将子widget放置内,一次性渲染完成,适合少量数据
    children: [
        new Text('测试1'),
        Divider(),
        new Text('测试2'),
        Divider(),
        new Text('测试3'),
        Divider(),
        new Text('测试4'),
        Divider(),
        new Text('测试5'),
        Divider(),
    ],
);

每个item不同listview

import 'package:flutter/material.dart';

class MyListPage extends StatelessWidget {
  final List<Item> itemList = [
    Item(type: ItemType.button, data: ['Button 1', 'Button 2']),
    Item(type: ItemType.text, data: 'Hello World'),
    Item(
        type: ItemType.image,
        data: 'https://example.com/images/image.jpg'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My List Page'),
      ),
      body: ListView.builder(
        itemCount: itemList.length,
        itemBuilder: (BuildContext context, int index) {
          Item item = itemList[index];

          Widget itemWidget;

          // 根据item类型构建不同的widget
          switch (item.type) {
            case ItemType.button:
              List<String> buttonTexts = item.data;
              itemWidget = Row(
                children: [
                  ElevatedButton(
                    onPressed: () {},
                    child: Text(buttonTexts[0]),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text(buttonTexts[1]),
                  ),
                ],
              );
              break;

            case ItemType.text:
              String textData = item.data;
              itemWidget = Text(textData);
              break;

            case ItemType.image:
              String imageUrl = item.data;
              itemWidget = Image.network(imageUrl);
              break;
          }

          return ListTile(
            title: itemWidget,
          );
        },
      ),
    );
  }
}

class Item {
  final ItemType type;
  final dynamic data;

  Item({
    required this.type,
    required this.data,
  });
}

enum ItemType {
  button,
  text,
  image,
}

垂直滑动嵌套平滑

class _PageBizCertificateState extends eState<PageBizCertificate> {

  final List<String> items = List.generate(20, (index) => 'Item $index');

  @override
  Widget pageBody(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return MyListItem(title: items[index]);
      },
    );
  }

  Widget MyListItem({required String title}) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('第一行文本'),
          SizedBox(height: 8.0),
          MyHorizontalScrollList(),
          SizedBox(height: 8.0),
          Text('第三文本'),
        ],
      ),
    );
  }

  Widget MyHorizontalScrollList() {
    return Container(
      height: 100.0,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 10,
        itemBuilder: (context, index) {
          return Container(
            width: 100.0,
            margin: EdgeInsets.all(4.0),
            color: Colors.blue,
            child: Center(
              child: Text('水平项 $index'),
            ),
          );
        },
      ),
    );
  }

}

参数列表

原文地址:https://blog.csdn.net/sadkhkuhkjasga/article/details/134647520

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_39590.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注