分类前端技术下的文章

Flutter沉浸式透明状态栏-flutter自定义凸起BottomAppBar导航

2024-08-16




import 'package:flutter/material.dart';
 
class CustomScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          // 背景图片或颜色
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/background.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          // 内容
          SafeArea(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                // 标题和返回按钮
                Padding(
                  padding: const EdgeInsets.only(left: 16.0, top: 32.0),
                  child: Row(
                    children: <Widget>[
                      IconButton(
                        icon: Icon(Icons.arrow_back),
                        onPressed: () => Navigator.of(context).pop(),
                      ),
                      Spacer(),
                      Text(
                        '标题',
                        style: TextStyle(fontSize: 20.0, color: Colors.white),
                      ),
                    ],
                  ),
                ),
                // 主要内容
                Expanded(
                  child: Container(
                    color: Colors.transparent,
                    child: Center(
                      child: Text(
                        '这里是主要内容',
                        style: TextStyle(fontSize: 24.0, color: Colors.white),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          // 凸起的BottomAppBar
          BottomAppBar(
            color: Colors.transparent,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                IconButton(icon: Icon(Icons.home), onPressed: () {}),
                IconButton(icon: Icon(Icons.search), onPressed: () {}),
                IconButton(icon: Icon(Icons.add), onPressed: () {}),
              ],
            ),
          ),

- 阅读更多 -

Flutter 中的 RefreshIndicator 小部件：全面指南

System

2024-08-16

所有,flutter

在Flutter中，RefreshIndicator是一个小部件，用于为列表添加下拉刷新功能。以下是如何使用RefreshIndicator的示例代码：




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('下拉刷新示例'),
        ),
        body: RefreshIndicator(
          onRefresh: _refreshList, // 刷新数据的回调函数
          child: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return ListTile(title: Text(items[index]));
            },
          ),
        ),
      ),
    );
  }
 
  // 假设的数据源
  List<String> items = List.generate(20, (i) => 'Item ${i + 1}');
 
  // 刷新数据的方法
  Future<void> _refreshList() async {
    // 这里可以执行数据刷新的逻辑，例如重新获取数据
    await Future.delayed(Duration(seconds: 2));
    // 更新数据源
    items = List.generate(20, (i) => 'Updated Item ${i + 1}');
  }
}

这段代码创建了一个带有下拉刷新功能的列表。当用户下拉列表时，_refreshList函数被调用，并且模拟了数据刷新的延时。刷新完成后，更新后的数据源会被展示在列表中。这是一个简单的实现下拉刷新的例子。

- 阅读更多 -

Flutter 图片加载

System

2024-08-16

所有,flutter

在Flutter中，你可以使用Image小部件来加载并显示图片。如果你想从网络加载图片，可以使用Image.network构造函数。如果你想从本地资源加载图片，可以使用Image.asset构造函数。

以下是一个简单的例子，展示如何在Flutter中使用Image.network来加载并显示一张网络图片：




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('图片加载示例'),
        ),
        body: Center(
          child: Image.network(
            'https://example.com/path/to/your/image.jpg', // 替换为实际的图片URL
            fit: BoxFit.cover,
            width: 200,
            height: 200,
          ),
        ),
      ),
    );
  }
}

在这个例子中，Image.network用于加载一个网络图片，并通过fit、width和height属性来指定图片的适配方式和尺寸。请确保替换图片URL为有效的网络图片地址。

如果你想从本地资源加载图片，请确保将图片文件添加到你的pubspec.yaml文件中，并使用Image.asset来加载它：




flutter:
  assets:
    - assets/images/my_image.jpg

然后在代码中使用：




Image.asset('assets/images/my_image.jpg'),

请注意，本地图片的路径是相对于pubspec.yaml文件的。

- 阅读更多 -

我才知道原来Flutter内置了10多种Button控件

System

2024-08-16

所有,flutter

Flutter中的Button控件主要指的是RaisedButton、FlatButton、OutlineButton、IconButton、ButtonBar、FloatingActionButton、PopupMenuButton、DropdownButton、Switch和Checkbox。这些控件提供了不同的视觉和行为特性，适用于不同的场景。

以下是每种Button控件的简单示例代码：

RaisedButton:




RaisedButton(
  onPressed: () {},
  child: Text('Raised Button'),
)

FlatButton:




FlatButton(
  onPressed: () {},
  child: Text('Flat Button'),
)

OutlineButton:




OutlineButton(
  onPressed: () {},
  child: Text('Outline Button'),
)

IconButton:




IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
)

ButtonBar:




ButtonBar(
  children: <Widget>[
    RaisedButton(
      onPressed: () {},
      child: Text('Button 1'),
    ),
    RaisedButton(
      onPressed: () {},
      child: Text('Button 2'),
    ),
  ],
)

FloatingActionButton:




FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
)

PopupMenuButton:




PopupMenuButton<String>(
  itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
    PopupMenuItem<String>(
      value: 'Item 1',
      child: Text('Item 1'),
    ),
    PopupMenuItem<String>(
      value: 'Item 2',
      child: Text('Item 2'),
    ),
  ],
)

DropdownButton:




DropdownButton<String>(
  items: <String>['Item 1', 'Item 2', 'Item 3']
      .map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String newValue) { },
)

Switch:




Switch(
  value: true,
  onChanged: (bool value) {},
)

Checkbox:




Checkbox(
  value: true,
  onChanged: (bool value) {},
)

这些代码仅提供了每个控件的基本用法，实际使用时可能需要根据具体需求添加更多属性或者处理逻辑。

- 阅读更多 -

Flutter 注解处理及代码生成

System

2024-08-16

所有,flutter




// 定义注解
@Retention(AnnotationRetention.SOURCE)
@Target(AnnotationTarget.CLASS)
annotation class GenerateIntentClass
 
// 定义注解处理器
class IntentProcessor : AbstractProcessor() {
    override fun process(set: MutableSet<out TypeElement>, roundEnvironment: RoundEnvironment): Boolean {
        // 找到所有带有 @GenerateIntentClass 注解的类
        val annotatedClasses = mutableListOf<TypeElement>()
        for (element in roundEnvironment.getElementsAnnotatedWith(GenerateIntentClass::class.java)) {
            if (element is TypeElement) {
                annotatedClasses.add(element)
            }
        }
 
        // 为每个类生成代码
        for (typeElement in annotatedClasses) {
            // 生成代码的逻辑
            // ...
        }
 
        return true
    }
 
    override fun getSupportedSourceVersion(): SourceVersion = SourceVersion.latest()
 
    override fun getSupportedAnnotationTypes(): MutableSet<String> = mutableSetOf(GenerateIntentClass::class.java.canonicalName)
}

这个代码示例展示了如何定义一个注解和一个注解处理器。注解处理器会在编译时检测所有标记了GenerateIntentClass注解的类，并为这些类生成相应的代码。这种技术在Flutter中用于生成路由映射代码，可以帮助开发者简化Android Intent和Flutter页面路由的管理。

- 阅读更多 -

Flutter完整开发实战详解( 打包与填坑篇)

System

2024-08-16

所有,flutter

由于篇幅限制，这里仅展示如何在Flutter中处理Android的第三方库依赖和iOS的配置的核心代码。

Android第三方库依赖处理

在android/app/build.gradle中添加所需的第三方库：




dependencies {
    // 添加第三方库依赖
    implementation 'com.google.code.gson:gson:2.8.6'
}

iOS配置处理

在ios/Runner/Info.plist中添加必要的配置：




<!-- 添加必要的配置 -->
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

在ios/Runner.xcworkspace的Xcode项目中进行额外的配置，比如添加iOS平台特有的第三方库或者修改配置文件等。

代码示例

以下是一个简单的Flutter插件配置示例：




import 'package:flutter/services.dart';
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('完整开发实战'),
      ),
      body: Center(
        child: Text('欢迎使用Flutter进行开发！'),
      ),
    );
  }
}

这段代码创建了一个简单的Flutter应用，展示了如何配置应用的根Widget和一个简单的页面。在实际开发中，你会根据项目的具体需求添加更多的功能和配置。

- 阅读更多 -

Flutter安卓混淆的相关问题

System

2024-08-16

所有,flutter

在Flutter中，混淆是一种代码优化手段，可以通过移除未使用的代码和资源来减小应用程序的大小。Flutter使用Dart的dart2js编译器，并且可以通过flutter build apk或flutter build appbundle命令生成Android的混淆版本。

问题1：如何为Flutter项目生成混淆版本？

解决方案：在你的android/app/build.gradle文件中，你可以找到类似下面的配置：




flutter {
    // ...
}
 
// 在android节中添加混淆配置
android {
    // ...
 
    buildTypes {
        release {
            // 确保minifyEnabled被设置为true
            minifyEnabled true
            // 混淆文件的位置，默认在build/outputs/mapping/release/
            // 可以通过renameMappingsFile来指定自定义的混淆文件名
            shrinkResources true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    // ...
}

问题2：如何为Flutter项目自定义混淆规则？

解决方案：在android/app/proguard-rules.pro文件中添加自定义的混淆规则。例如，如果你有一个类名为ExampleClass的类，并且你不希望这个类被混淆，你可以添加如下规则：




-keep class com.example.ExampleClass { *; }

问题3：混淆过程中遇到问题，如何解决？

解决方案：

确保所有Native方法都被正确地保留。
如果你的项目依赖于平台通道传递的复杂对象，确保这些对象的构造函数和方法都被保留。
查看混淆过程中的报错信息，并根据报错信息添加相应的混淆规则。
如果你使用了第三方库，查看这些库的文档，按照它们的指示添加混淆规则。

问题4：混淆后的bug报告和分析怎么办？

解决方案：

使用ProGuard或R8生成的映射文件（mapping file）来解码混淆后的堆栈跟踪信息。
使用Flutter的flutter build apk --obfuscation命令生成混淆版本的同时，也生成一个不混淆的版本，便于调试。
使用Flutter的flutter build apk --split-debug-info=/path/to/split_info命令分离调试信息。

问题5：混淆规则的优化和优化混淆后的应用性能。

解决方案：

确保混淆规则不会错误地移除重要的代码和资源。
优化混淆规则的组合，以提高混淆效果，同时尽量减少对应用性能的影响。

请注意，混淆规则的正确性和优化程度将直接影响混淆后的应用性能和稳定性。在实施混淆规则时，应该充分测试应用程序，以确保没有损坏关键的代码路径或资源。

- 阅读更多 -

Flutter实战 -- fl_chart(条形图)

System

2024-08-16

所有,flutter




import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
 
class BarChartSample1 extends StatefulWidget {
  @override
  _BarChartSample1State createState() => _BarChartSample1State();
}
 
class _BarChartSample1State extends State<BarChartSample1> {
  List<BarChartGroupData> rawBarData = [
    BarChartGroupData(x: 0, barRods: [
      BarChartRodData(
        y: 8,
        colors: [const Color(0xff04dbff)],
        width: 16,
      ),
    ]),
    BarChartGroupData(x: 1, barRods: [
      BarChartRodData(
        y: 8,
        colors: [const Color(0xff04dbff)],
        width: 16,
      ),
    ]),
    BarChartGroupData(x: 2, barRods: [
      BarChartRodData(
        y: 8,
        colors: [const Color(0xff04dbff)],
        width: 16,
      ),
    ]),
    BarChartGroupData(x: 3, barRods: [
      BarChartRodData(
        y: 8,
        colors: [const Color(0xff04dbff)],
        width: 16,
      ),
    ]),
    BarChartGroupData(x: 4, barRods: [
      BarChartRodData(
        y: 8,
        colors: [const Color(0xff04dbff)],
        width: 16,
      ),
    ]),
    BarChartGroupData(x: 5, barRods: [
      BarChartRodData(
        y: 8,
        colors: [const Color(0xff04dbff)],
        width: 16,
      ),
    ]),
    BarChartGroupData(x: 6, barRods: [
      BarChartRodData(
        y: 8,
        colors: [const Color(0xff04dbff)],
        width: 16,
      ),
    ]),
    BarChartGroupData(x: 7, barRods: [
      BarChartRodData(
        y: 8,
        colors: [const Color(0xff04dbff)],
        width: 16,
      ),
    ]),
    BarChartGroupData(x: 8, barRods: [
      BarChartRodData(
        y: 8,
        colors: [const Color(0xff04dbff)],
        width: 16,
      ),
    ]),
    BarChartGroupData(x: 9, barRods: [
      BarChartRodData(
        y: 8,
        colors: [const Color(0xff04dbff)],
        width: 16,
      ),
    ]),
  ];
 
  @override
  Widget build(BuildContext context) {
    return BarChart(
      BarChartData(
        groupsSpace: 10,
        barGroups: rawBarData,
        alignment: BarChartAlignment.center,
        barRods: [
          BarChartRodData(

- 阅读更多 -

小程序开发-swiper 组件的常用属性-image 组件的 mode 属性

System

2024-08-16

所有,html5

在小程序中，swiper 组件用于创建滑块视图容器，而 image 组件用于显示图片。mode 属性是 image 组件的一个属性，用于指定图片的裁剪、缩放模式。

mode 的常用值有：

scaleToFill：默认值，缩放模式，不保持宽高比缩放图片，使图片完全覆盖背景区域。
aspectFit：缩放模式，保持宽高比缩放图片，使图片的长边能完全显示出来。
aspectFill：缩放模式，保持宽高比缩放图片，只保证图片的短边能完全显示出来。
widthFix：宽度不变，高度自动变化，保持原图宽高比。

示例代码：




<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key="*this">
    <swiper-item>
      <image src="{{item}}" mode="aspectFit" />
    </swiper-item>
  </block>
</swiper>

在这个例子中，swiper 组件用于创建一个滑块视图，swiper-item 组件用于指定滑块视图中的每一个滑块。image 组件用于显示每个滑块中的图片，mode 属性设置为 aspectFit，保证图片不会失真的情况下完全显示出来。

- 阅读更多 -

Flutter中的http网络请求，值得一看

System

2024-08-16

所有,flutter

在Flutter中，可以使用http包来进行网络请求。首先，需要在pubspec.yaml文件中添加http包的依赖。




dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3 # 确保使用最新版本

然后，可以使用http.get方法来发送HTTP GET请求。以下是一个简单的例子：




import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('HTTP请求示例'),
        ),
        body: Center(
          child: FutureBuilder<String>(
            future: fetchData(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data!);
              } else if (snapshot.hasError) {
                return Text('出现错误：${snapshot.error}');
              }
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
 
  Future<String> fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
    if (response.statusCode == 200) {
      return response.body;
    } else {
      throw Exception('Failed to load post');
    }
  }
}

在这个例子中，我们创建了一个FutureBuilder来处理异步请求。当请求成功时，我们将返回响应体，否则抛出异常。这个例子演示了如何在Flutter中进行简单的HTTP GET请求，并处理响应。

- 阅读更多 -