3_flutter_黑色主题,Listview(列表),GridView(网格)

最新推荐文章于 2024-04-09 12:54:08 发布
转载 最新推荐文章于 2024-04-09 12:54:08 发布 · 519 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5c713b896fb9a049e702bc29
文章标签：

#移动开发

本文详细介绍了如何在Flutter中实现黑色主题，包括静态和动态主题切换，并展示了Listview和GridView的使用方法，以及如何在GridView中填充内容和添加点击事件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1_黑色主题

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness:Brightness.dark,
        primarySwatch: Colors.blue,
        primaryColor: const Color(0xFF212121),
        accentColor: const Color(0xFF64ffda),
        canvasColor: const Color(0xFF303030),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('黑色主题'),
      ),
    );
  }
}
复制代码

1.1_动态黑色主题

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {  
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {  
  bool darkTheme=false;
  @override
  Widget build(BuildContext context) { 
    return MaterialApp(
      theme: darkTheme ? ThemeData.dark() :ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('动态黑色主题'),
        ),

        body: Container(
          child: Column(
            children: <Widget>[
    
           ListTile(
             leading: Icon(Icons.accessibility),
             title: Text('黑色主题'),
             trailing: Switch(
               value: darkTheme,
           onChanged: (value){
             setState(() {
               darkTheme=value;
             });
           },
         ),
       ),

        ],
      )
    ),
      ),
    );
        
   
  }
}
复制代码

2_Listview(列表)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Generated App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: const Color(0xFF2196f3),
        accentColor: const Color(0xFF2196f3),
        canvasColor: const Color(0xFFfafafa),
        fontFamily: 'Merriweather',
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Name'),
      ),
      body: ListView(children: List.generate(10, (idx){
        return Card(child: Container(
          height: 150,
          color: Colors.greenAccent,
          child: Text('$idx'),
        ),);
      }),),
    );
  }
}
复制代码

2.1基本列表

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Basic List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
          ],
        ),
      ),
    );
  }
}
复制代码

3_GridView(网格)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Generated App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: const Color(0xFF2196f3),
        accentColor: const Color(0xFF2196f3),
        canvasColor: const Color(0xFFfafafa),
        fontFamily: 'Merriweather',
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Name'),
      ),
      
      body: GridView.count(
        crossAxisCount: 2,
        childAspectRatio: 2/3,
      children: List.generate(100, (idx){
        return Card(child: Container(
          color: Colors.greenAccent,
          child: Text('$idx'),
        ),);
      }),),

    );
  }
}
复制代码

3.1_网格视图填入内容(图标+文字+图标颜色)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(   
      home:Scaffold( 
      appBar: AppBar(title: Text('双行card'),),
body: Container(
  child: GridView.count(
      primary: true,
      padding: const EdgeInsets.all(1.0),
      crossAxisCount: 2,
      mainAxisSpacing: 1.0,
      crossAxisSpacing: 1.0,
      children: <Widget>[
      MyGridView (icon: Icons.home,teks: "欢迎",warnaIcon: Colors.brown,),
      MyGridView (icon: Icons.favorite,teks: "大家",warnaIcon: Colors.pink,),
      MyGridView (icon: Icons.place,teks: "阅读",warnaIcon: Colors.blue,), 
      MyGridView (icon: Icons.settings,teks: "莫狄",warnaIcon: Colors.black,),
      MyGridView (icon: Icons.access_time,teks: "博客",warnaIcon: Colors.yellow,), 
      MyGridView (icon: Icons.accessibility,teks: "谢谢",warnaIcon: Colors.red,),
      MyGridView (icon: Icons.add,teks: "观看",warnaIcon: Colors.green,), 
      MyGridView (icon: Icons.airplay,teks: "！！！",warnaIcon: Colors.teal,),
      ],
    ),
),
    ),
    );
 
  }
}

class MyGridView  extends StatelessWidget{
  MyGridView ({this.icon,this.teks,this.warnaIcon});

  final IconData icon;
  final String teks;
  final Color warnaIcon;

  @override
  Widget build(BuildContext context){
    return Container(
child: Card(
  elevation: 1.5,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    mainAxisSize: MainAxisSize.min,
    verticalDirection: VerticalDirection.down,
    children: <Widget>[
      Icon(icon,
      size: 130.0,
      color: warnaIcon),
      Center(
        child:Text(teks),
      ), 
    ],
  ),
),
    );
  }
}
复制代码

3.2_点击事件

不要在MaterialApp里面写，分开写

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(   
      home:Scaffold( 
      appBar: AppBar(title: Text('双行card'),),
body: myapp1(),
    ),
    );
 
  }
}
class myapp1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Container(
  child: GridView.count(
      primary: true,
      padding: const EdgeInsets.all(1.0),
      crossAxisCount: 2,
      mainAxisSpacing: 1.0,
      crossAxisSpacing: 1.0,
      children: <Widget>[
       InkWell( 
         child:MyGridView (icon: Icons.home,teks: "欢迎",warnaIcon: Colors.brown,),
    onTap: () { 
        Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
    },),


     InkWell(
          child:MyGridView (icon: Icons.favorite,teks: "大家",warnaIcon: Colors.pink,),
    onTap: () {
        Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen1()),
            );
    },),


     InkWell(
          child:MyGridView (icon: Icons.place,teks: "阅读",warnaIcon: Colors.blue,),
    onTap: () {
        Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen1()),
            );
    },),  

      MyGridView (icon: Icons.settings,teks: "莫狄",warnaIcon: Colors.black,),
      MyGridView (icon: Icons.access_time,teks: "博客",warnaIcon: Colors.yellow,), 
      MyGridView (icon: Icons.accessibility,teks: "谢谢",warnaIcon: Colors.red,),
      MyGridView (icon: Icons.add,teks: "观看",warnaIcon: Colors.green,), 
      MyGridView (icon: Icons.airplay,teks: "！！！",warnaIcon: Colors.teal,),
      ],
    ),
),
    );
  }
}
class MyGridView  extends StatelessWidget{
  MyGridView ({this.icon,this.teks,this.warnaIcon});

  final IconData icon;
  final String teks;
  final Color warnaIcon;

  @override
  Widget build(BuildContext context){
    return Container(
       child:InkWell(
         child: Card(
  elevation: 1.5,
 
    child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    mainAxisSize: MainAxisSize.min,
    verticalDirection: VerticalDirection.down,
    children: <Widget>[
      Icon(icon,
      size: 130.0,
      color: warnaIcon),
      Center(
        child:Text(teks),
      ), 
    ],
  ),
),
   ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("新页面"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

class SecondScreen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("新页面1"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

复制代码

3.3_网格视图填入内容(图片+文字)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(   
      home:Scaffold( 
      appBar: AppBar(title: Text('双行card'),),
body: Myapp1(),
    ),
    );
 
  }
}
class  Myapp1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Container(
  child: GridView.count(
      primary: true,
      padding: const EdgeInsets.all(1.0),
      crossAxisCount: 2,
      childAspectRatio: 2/3,
      mainAxisSpacing: 1.0,
      crossAxisSpacing: 1.0,
      children: <Widget>[
       InkWell( 
         child:MyGridView (image: "capacitor.png",teks: "莫狄"),
    onTap: () { 
        Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
    },),


     InkWell(
          child:MyGridView (image: "capacitor.png",teks: "莫狄"),
    onTap: () {
        Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen1()),
            );
    },),

     InkWell(
          child:MyGridView (image: "capacitor.png",teks: "莫狄"),
    onTap: () {
        Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen1()),
            );
    },),  

      MyGridView (image: "capacitor.png",teks: "莫狄"),
      MyGridView (image: "capacitor.png",teks: "博客"), 
      MyGridView (image: "capacitor.png",teks: "谢谢"),
      MyGridView (image: "capacitor.png",teks: "观看"), 
      MyGridView (image: "capacitor.png",teks: "！！！"),
      ],
    ),
),
    );
  }
}
class MyGridView  extends StatelessWidget{
  MyGridView ({this.image,this.teks});

  final String  image;
  final String teks;

  @override
  Widget build(BuildContext context){
    return Container(
       child:InkWell(
         child: Card(
  elevation: 1.5,
 
    child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    mainAxisSize: MainAxisSize.min,
    verticalDirection: VerticalDirection.down,
    children: <Widget>[
      Image(image: AssetImage('lib/images/' + image)),
      Center(
        child:Text(teks),
      ), 
    ],
  ),
),
   ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("新页面"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

class SecondScreen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("新页面1"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}
复制代码

转载于:https://juejin.im/post/5c713b896fb9a049e702bc29

Flutter listTile点击修改背景颜色（不刷新界面）
flutter_learner的博客
08-24 3840
通常情况下Flutter对于界面内元素状态的改变需要调用setstate来刷新界面，那有没有办法只修改指定元素的状态，这里提供一种方法，以ListTile为例， 创建监听监听ListTile的点击状态，当监听值发生改变调用ValueListenableBuilder来重构该元素，实现点击后该变该元素状态。效果如下： 具体代码实现如下： Widget selectFolders() { ValueNotifier<List<bool>> isClicked =.
Flutter之ListItem支持点击态背景色
周洁伦之谜_相信我
11-27 1614
上一篇，我们实现了普通控件的点击态背景色（无论点击快慢都有背景色变化）。但是，当我将其应用到ListItem时，出现错误。原因不知，猜测是与item复用有关。 然后我尝试使用AnimatedContainer，可以做到按下和松开时背景色变化。正如上一篇所说，AnimatedContainer无法实现快速按下松开后的背景色变化，因此，我决定参考AnimatedContainer源码实现了ListI...
flutter-GridView使用
weixin_43575775的博客
08-03 1743
flutter-GridView组件配合SingleChildScrollView组件使用
Flutter组件-GridView-网格组件
weixin_41791739的博客
02-14 261
import 'package:flutter/material.dart'; void main() =&gt; runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( ...
Flutter开发（六）—— GridView网格列表
RedKeyer的博客
04-26 437
原 Flutter开发（六）—— GridView网格列表
Flutter 列表组件ListView 网格布局组件GridView
lvlemo的博客
11-28 1062
持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表布局是我们项目开发中最常用的一种布局方式。Axis.horizontal水平列表。Axis.vertical垂直列表。
flutter_staggered_animations:轻松将交错动画添加到ListView，GridView，Column和Row子级
05-13
轻松将交错动画添加到ListView ， GridView ， Column和Row子级，如所示 展示柜 列表显示 网格视图 柱子 Flutter 2.0和null安全 从1.0.0版本开始， flutter_staggered_animations是null安全的，并且最低要求Dart SDK...
深入解析Flutter滚动组件：掌握ListView与GridView
在Flutter中，ListView和GridView是两个非常关键的组件，它们用于实现滚动功能，是构建列表和网格布局不可或缺的部分。由于其重要性，对这两个组件的深度理解和运用是每个使用Flutter进行移动应用开发的开发者必须...
Flutter布局基础：ListView和GridView的应用
与ListView类似，GridView也是一个用于创建列表的组件，但它支持网格布局，适用于展示卡片式、图片墙式的内容。通过配置GridView的交叉轴和主轴上子组件的排列方式，可以实现不同类型的网格布局，如平铺网格（Tile ...
Flutter：GridView组件及动态GridView
weixin_46136019的博客
03-13 1393
我们常用的创建网格列表的方式有两种：1.通过 GridView.count 实现网格布局2.通过 GridView.builder 实现网格布局。
ListView 去除边缘阴影、选中色、拖动背景色等
09-12
ListView 去除边缘阴影、选中色、拖动背景色等
Flutter之ListView
01-08
文章目录资料基础用法ListView 简单堆列ScrollPhysics样式的listView 资料 三、Flutter基础—ListView入门 Flutter ListView 列表进阶 基础用法 import &#39;package:flutter/cupertino.dart&#39;; import &#39;package:flutter/material.dart&#39;; class ListViewPage extends StatefulWidget { @override State createState() { return _ListViewPageState(); } }
Flutter GridView网格布局
10-05
GridView 是一个网格布局的列组件。GridView 继承至 CustomScrollView，有 CustomScrollView 的特性。
用GridView画带背景色和点击事件的简单表格
05-10
画简单的表格，表格背景颜色自定，可以对表格每个单元格进行点击
ListView自定义背景颜色
cs_jiang的专栏
01-04 3721
<br />在Android中，ListView是最常用的一个控件，在做UI设计的时候，很多人希望能够改变一下它的背景，使他能够符合整体的UI设计，改变背景背很简单只需要准备一张图片然后指定属性 android:background="@drawable/bg"，不过不要高兴地太早，当你这么做以后，发现背景是变了，但是当你拖动，或者点击list空白位置的时候发现ListItem都变成黑色的了，破坏了整体效果，如下图所示:<br /> <br /><br /><br /> <br /> <br />这是为什么
Flutter适配深色模式（DarkMode）
最新发布
2301_82242499的博客
04-09 1566
/ 文字选择色（输入框复制粘贴菜单）// TextField输入文字颜色// Text默认文字样式// 这里用于小文字样式),),),使用：当然有些Widget没有使用到，所以也就没有去适配。以上这些color、theme具体的使用地方需要自己去翻看源码及注释才能知道，所以这是一个比较费力的过程。
Flutter ios 使用ListView 。滚动时 AppBar 改变颜色问题
q515656712的博客
12-18 3786
可以给 AppBar 或者 AppBarTheme。scrolledUnderElevation: 0.0 属性。在Ios 中 列表滚动条向下滚动一段距离后 会导致 AppBar 颜色改变。
Flutter学习笔记：GridView实现分组显示效果
鲨鱼不会飞的博客
06-04 7822
前言部分 近期继续探索flutter的相关内容，这次介绍的控件是c，是使用率很高的的控件。以前我只是常规的使用其基本的用法，所以也没有做笔记，毕竟flutter中文网上还是有介绍的。 今天的需求稍微不同，需要通过GridView来显示一个列表。但是这个列表还需要有一个额外的功能就是分组。如果以前用Android实现的话，我们通常是使用RecyclerView来实现，可以通过多类型的ViewHol...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值