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);
            });
          },
        );
      }),
    );
  }
}

效果图如下:

       

猜你喜欢

转载自blog.csdn.net/augfun/article/details/106775088