Flutter 在同一页面显示List和Grid

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text('data'),
          ),
          ListTile(
            title: Text('data'),
          ),
          GridView.count(
            primary:
                false, // https://api.flutter.dev/flutter/widgets/ScrollView/primary.html
            shrinkWrap: true, // 限制约束 https://api.flutter.dev/flutter/widgets/ScrollView/shrinkWrap.html
            crossAxisCount: 3,
            children: List<Widget>.generate(
                7,
                (_) => Container(
                      color: Colors.red,
                      margin: const EdgeInsets.all(8),
                    )),
          ),
          ListTile(
            title: Text('data'),
          ),
          ListTile(
            title: Text('data'),
          ),
        ],
      ),
    );
  }
}

or use CustomScrollView

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverList(
              delegate: SliverChildListDelegate([
            ListTile(title: Text("data")),
            ListTile(title: Text("data")),
          ])),
          SliverGrid.count(
            crossAxisCount: 3,
            children: List<Widget>.generate(
              7,
              (_) => Container(
                color: Colors.red,
                margin: const EdgeInsets.all(8),
              ),
            ),
          ),
          SliverList(
              delegate: SliverChildListDelegate([
            ListTile(title: Text("data")),
            ListTile(title: Text("data")),
          ])),
        ],
      ),
    );
  }
}
posted @ 2019-11-06 11:42  Ajanuw  阅读(735)  评论(0编辑  收藏  举报