首页 > 其他分享 >ValueNotifier<T> ValueListenableBuilder<T> Stack() positioned.fill()

ValueNotifier<T> ValueListenableBuilder<T> Stack() positioned.fill()

时间:2023-07-24 14:11:59浏览次数:37  
标签:widget const Text positioned controller child ValueNotifier fill

 

1、在Column下面增加可以滚动的Row

2、在widget外部控件其内部的变量 ValueNotifier<T>  ValueListenableBuilder<T>(valueListenable:...,builder:()=>)

 

 

import 'package:flutter/material.dart';

class SettingsPage extends StatelessWidget {
  final int _counter = 0;
  late CountController ccon = CountController();
  SettingsPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Settings'),
      ),
      body: Center(
          child: Column(
        children: <Widget>[
          Stack(
            children: [
              const IgnorePointer(
                //忽略点击事件
                child: Opacity(
                  //隐藏这个widget
                  opacity: 0.0, //隐藏这个widget
                  child: Item(), //stack 下面的非positioned的元素确定高度
                ),
              ),
              const SizedBox(
                width: double.infinity, //stack 下面的非positioned的元素确定宽度
              ),
              Positioned.fill(
                  child: ListView.builder(
                //shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) => Item(),
              )),
            ],
          ),
          const SizedBox(
            height: 50,
          ),
          const Expanded(
              flex: 1,
              child: SizedBox(
                child: Text(
                  '以下是跨widget共享变量的测试',
                  style: TextStyle(fontSize: 30),
                ),
              )),
          Expanded(
            flex: 2,
            child: SizedBox(
                child: Counter(
              controller: ccon,
            )),
          )
        ],
       
      )),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ccon._count.value = 0;
        },
        child: Icon(Icons.clear),
      ),
    );
  }
}
//card widget自定义
class Item extends StatelessWidget {
  const Item({super.key});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(children: [
        Text(
          'hello',
          style: TextStyle(fontSize: 32),
        ),
        Text(
          'world',
          style: TextStyle(fontSize: 47),
        )
      ]),
    );
  }
}

// 变量ValueNotifier<T> 被  ValueListenableBuilder<int> 监听 
class Counter extends StatefulWidget {
  final CountController controller;
  const Counter({super.key, required this.controller});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ValueListenableBuilder<int>(
          valueListenable: widget.controller._count,
          builder: (context, value, _) {
            return Center(
              child: ListView(
                padding: EdgeInsets.all(30),
                children: [
                  Center(
                      child: Text(
                    'Value is $value',
                    style: TextStyle(
                      fontSize: 50,
                    ),
                  )),
                  ElevatedButton(
                      onPressed: () {
                        widget.controller._count.value++;
                      },
                      child: Text('button ${widget.controller._count.value}'))
                ],
              ),
            );
          }),
    );

    
  }
}

class CountController {
   

  ValueNotifier<int> _count = ValueNotifier(0);
}

 

标签:widget,const,Text,positioned,controller,child,ValueNotifier,fill
From: https://www.cnblogs.com/hztech/p/17577066.html

相关文章

  • C++输入输出,设置精度setprecision、域宽setw、填充setfill
    本文的三个函数均需要引入头文件:#include<iomanip>设置输出精度setprecision(intn)参考:C语言中文网:c++setprecision用法详解//写法1cout<<setprecision(10)<<a<<endl;//写法2:a、b、c都将以10位有效位输出cout<<setprecision(10);cout<<a<<endl;cout......
  • C# mysql MySqlDataAdapter fill(dataset) 字符串格式错误
    MySqlDataAdapter fill(dataset)时候报错字符串格式错误。排查两天发现是mysql数据表内字段设计错误,datetime格式的字段长度设置错误,应设置为0,原先设置为6.代码如下try{using(MySqlConnectionconnection=newMySqlConnection(connectio......
  • memset 与 fill 函数的区别
    在使用时发现memset和fill函数有异同,为了防止考试的时候挂分,专门了解了一下。memset函数由于memset的底层实现是类似二进制实现的字节赋值,只能赋为\(0\),\(1\),\(INF\)或\(-INF\),有比较大的局限性。举个例子:\(int\)类型有\(4\)个字节,每个字节有\(8\)个数字,一......
  • 利用谷歌浏览器插件Autofill一键提取QQ裙所有QQ邮箱
     众所周知,QQ号是公开的,QQ号加上后缀@qq.com就是QQ邮箱。因此只要获取到一批QQ号就意味着获取到一批QQ邮箱,进而利用邮件群发技术来批量发送邮件获取客户。QQ群是QQ用户最集中的地方,在这里可以快速获取大量精准用户,下面详细讲解方法。如题,第一步:下载谷歌浏览器,然后安装Autofill插件......
  • java Arrays.fill 扩充数组
    importjava.util.*;publicclassImoocStudent{publicstaticvoidmain(Stringargs[]){intarray[]=newint[6];Arrays.fill(array,100);for(inti=0,n=array.length;i<n;i++){System.out.println(array[i])......
  • Asp.Net中的Fillter
    Asp.net中一共有五种FillterAuthorizationFilter授权过滤器IResourceFilter资源管理过滤器IActionFilter行为过滤器IExceptionFilter异常过滤器IResultFilter结果过滤器publicclassCtmActionFilterAttribute:Attribute,IActionFilter{publicvo......
  • The server encountered an internal error that prevented it from fulfilling this
    org.apache.ibatis.exceptions.PersistenceException:###Errorqueryingdatabase.Cause:com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException:Couldnotcreateconnectiontodatabaseserver.###Theerrormayexistincom/itheima/mapper/Br......
  • GDI-FillRgn用画刷填充区域
     HRGNhrgn1=CreateRectRgn(10,10,100,100);//创建矩形区域HRGNhrgn2=CreateEllipticRgn(150,150,250,250);//创建椭圆区域HRGNhrgn=CreateRectRgn(0,0,0,0);intn1=::CombineRgn(hrgn,hrgn1,hrgn2,RGN_OR);//将两个区域组......
  • 20223.05.12 - 可选链操作符的Ployfill
    可选链操作符是ES2020的新特性,如果要在webpack版本低于5.20的vue2项目中使用它,需要对babel进行配置。首先,需要安装@babel/plugin-proposal-optional-chaining插件:npminstall--save-dev@babel/plugin-proposal-optional-chaining然后,在.babelrc或babel.config.js文件......
  • Picturefill.WP – 根据屏幕尺寸加载合适的图片
    Picturefill.WP插件利用picturefill.js脚本展示Responsive图片,即根据视口宽度选择尺寸合适的图片加载,节省带宽,提高网站载入速度。例如用户用手机访问站点,该插件会选择适合手机尺寸的图片(如缩略图)加载,不会加载完整尺寸图片。使用方法没有选项,无需任何设置,下载插件激活,网站文章中的所......