Flutter2.Flutter list展示数据

main.dart

import 'package:flutter/material.dart';
import 'SwipeToDismissDemo.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
        home: SwipeToDismissDemo()
    );
  }
}
SwipeToDismissDemo.dart
import 'package:flutter/material.dart';

class SwipeToDismissDemo extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return new _SwipeToDismisState();
  }
}

class _SwipeToDismisState extends State<SwipeToDismissDemo>{

  List<String> list = List.generate(20, (index) => "This is title $index element");
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text("this is title"),),
      body: ListView.builder(itemCount:list.length,
      itemBuilder: (context, index){
        //左滑的空控件
        return Dismissible(
          key: Key(list[index]),
          direction: DismissDirection.endToStart,
          child: ListTile(title: Text('${list[index]}')),
          background: Container(
            color: Colors.redAccent,
          ),
          onDismissed: (direction) {
            setState(() {
              Scaffold.of(context).showSnackBar(
                  SnackBar(content: Text("${list[index]}")));
              list.removeAt(index);
            });
          },
        );
      }),
    );
  }
}

效果图如下:

       

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值