user3523406's questions

我正在学习 Flutter for web，并且遇到了一些小部件无法正确适应 Chrome 浏览器窗口的问题。这会导致“底部溢出”错误，因为不会出现滚动条来容纳额外的内容。下面是我的应用程序的布局结构，其中我主要使用 Column 和 AspectRatio 小部件。如何修改 Flutter 布局以确保所有内容都适合可视区域并在必要时显示滚动条？

lib/basic_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_layout/immutable_widget.dart'; //ALT+Enter on `Widget`
import 'package:flutter_layout/text_layout.dart';

class BasicScreen extends StatelessWidget {
  const BasicScreen({super.key});

  @override
  Widget build(BuildContext context) {
    //Scaffolds are also aware of your device’s specifics.
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigo,
        title: const Text('Welcome to Flutter'),
        actions: const [
          Padding(
            padding: EdgeInsets.all(10.0),
            child: Icon(Icons.edit),
          ),
        ],
      ),
         body: Column(
        children: const [
          AspectRatio(
            aspectRatio: 1.0,
            child: ImmutableWidget(),
          ),
          TextLayout(),
        ],
      ),
      drawer: Drawer(
        child: Container(
          color: Colors.lightBlue,
          child: const Center(
            child: Text("I'm a Drawer!"),
          ),
        ),
      ),
    );
  }
}

lib/immutable_widget.dart

import 'package:flutter/material.dart';
import 'dart:math' as Math;

class ImmutableWidget extends StatelessWidget {
  const ImmutableWidget({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.green),
      foregroundDecoration: const BoxDecoration(
        backgroundBlendMode: BlendMode.colorBurn,
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Color(0xAA0d6123),
            Color(0x00000000),
            Color(0xAA0d6123),
          ],
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.all(40),
        child: Transform.rotate(
          angle: 180 / Math.pi, // Rotations are supplied in radians
          child: Container(
            width: 250,
            height: 250,
            decoration: BoxDecoration(
              color: Colors.purple,
              boxShadow: [
                BoxShadow(
                    color: Colors.deepPurple.withAlpha(120),
                    spreadRadius: 4,
                    blurRadius: 15,
                    offset: Offset.fromDirection(1.0, 30)),
              ],
              borderRadius: const BorderRadius.all(Radius.circular(20)),
            ),
            child: Padding(
              padding: const EdgeInsets.all(50.0),
              child: _buildShinyCircle(),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildShinyCircle() {
    return Container(
      decoration: const BoxDecoration(
        shape: BoxShape.circle,
        gradient: RadialGradient(
          colors: [
            Colors.lightBlueAccent,
            Colors.blueAccent,
          ],
          center: Alignment(-0.3, -0.5),
        ),
        boxShadow: [
          BoxShadow(blurRadius: 20),
        ],
      ),
    );
  }
}

库/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_layout/basic_screen.dart';
import 'package:flutter_layout/immutable_widget.dart';

void main() => runApp(const StaticApp());

class StaticApp extends StatelessWidget {
  const StaticApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //home: const ImmutableWidget(), //Because or using Scaffolds.
      home: const BasicScreen(),
    );
  }
}

lib/text_layout.dart

import 'package:flutter/material.dart';

class TextLayout extends StatelessWidget {
  const TextLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          'Hello, World!',
          style: TextStyle(fontSize: 16),
        ),
        Text(
          'Text can wrap without issue',
          style: Theme.of(context).textTheme.headline6,
        ),
//make sure the Text below is all in one line:
        const Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at mauris massa. Suspendisse potenti. Aenean aliquet eu nisl vitae tempus.'),
      ],
    );
  }
}

我有以下CSV 文件：

$ cat ../SyncedShazams.csv
"artist","title","status","date","longitude","latitude"
"Queen","Fat Bottomed Girls","N/A","2024-04-09T22:03:30.164Z","N/A","N/A"
"W&W & AXMO","Heaven Is a Place On Earth","N/A","2024-04-09T21:59:34.614Z","N/A","N/A"
"Kleks & sanah","Jestem Twoją Bajką","N/A","2024-04-07T05:07:22.333Z","N/A","N/A"
"Oskar Cyms","Nigdy wcześniej","N/A","2024-04-06T04:49:43.106Z","N/A","N/A"
"Heidi Montag","I'll Do It","N/A","2024-04-04T07:23:10.340Z","N/A","N/A"
"vowl. & Sace","2000","N/A","2024-04-04T07:22:53.608Z","N/A","N/A"
"City High","What Would You Do?","N/A","2024-04-03T20:22:52.658Z","N/A","N/A"
"City High","What Would You Do?","N/A","2024-04-03T20:22:32.131Z","N/A","N/A"
"Kleks, IGO, Kaśka Sochacka, Mrozu, Artur Rojek, Brodka, Ralph Kaminski, Bedoes 2115 & Sokół","Całkiem Nowa Bajka","N/A","2024-03-29T23:39:11.413Z","N/A","N/A"

列必须按如下方式转换：

Queen - Fat Bottomed Girls
Kleks, IGO, Kaśka Sochacka, Mrozu, Artur Rojek, Brodka, Ralph Kaminski, Bedoes 2115 & Sokół - Całkiem Nowa Bajka

然而，当前的 Dart 代码仅打印HELLO出来。

$ cat bin/shazam.dart
import 'package:shazam/shazam.dart' as shazam;
import 'dart:io';
import 'package:csv/csv.dart';

void main() async {
  try {
    final String csvData = await readFile('../SyncedShazams.csv'); 
    final List<List<dynamic>> rows = const CsvToListConverter().convert(csvData);
    print("HELLO");
  
    // Skip the header and process each row
    for (var row in rows.skip(1)) {
      if (row.length > 1) {
        // Artists and song title are expected to be in the first and second columns respectively
        print('${row[0]} - ${row[1]}');
      }
    }
  } catch (e) {
    print('Failed to process CSV: $e');
  }
}

Future<String> readFile(String filePath) async {
  final file = File(filePath);
  try {
    return await file.readAsString();
  } catch (e) {
    throw Exception('Failed to read the file: $e');
  }
}

飞镖输出：

$ dart run
Building package executable... 
Built shazam:shazam.
HELLO

我错过了什么？