zoukankan      html  css  js  c++  java
  • 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")),
              ])),
            ],
          ),
        );
      }
    }
    
  • 相关阅读:
    Ext架构分析(6)最简单的layout:AnchorLayout
    Ext架构分析(4)Container之旅
    ext学习资源汇总
    DomQuery v1.1 高级
    Ext 2.0 教程 目录
    HDOJ2006 ( 求奇数的乘积 ) 【水题】
    HDOJ2017 ( 字符串统计 ) 【水题】
    状态模式(State)
    HDOJ2002 ( 计算球体积 ) 【水题】
    HDOJ2007 ( 平方和与立方和 ) 【水题】
  • 原文地址:https://www.cnblogs.com/ajanuw/p/11804214.html
Copyright © 2011-2022 走看看