dart 为什么我的笔触没有出现在画布上

我试图设计一个简单的绘图应用程序在Flutter，我有麻烦，试图实现实际的笔触和他们的外观。下面是我的代码：

import 'package:flutter/material.dart';
import 'components/paint_selector.dart';
import 'components/paint_list.dart' as paintList;
import 'components/user_canvas.dart';
import 'components/objects/userLine.dart';

//boilderplate code
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // GlobalKey _key = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AGG Demo',
      // theme: ThemeData(
      //  primarySwatch: Colors.blue,
      // ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  Paint globalBrush = Paint()
    ..color = Colors.black
    ..strokeWidth = 5;
    
  UserLine strokePath = UserLine();

  @override
  Widget build(BuildContext context) {
    List<Paint> paintList = [
      Paint()
        ..color = Colors.red,
      Paint()
        ..color = Colors.green,
      Paint()
        ..color = Colors.blue,
    ];
    double screenHeight = MediaQuery.of(context).size.height;
    double screenWidth = MediaQuery.of(context).size.width;
    return Container(
      height: screenHeight,
      width: screenWidth,
      color: Colors.black,
      child: GestureDetector(
        onPanStart: (details) {
          strokePath = UserLine();
          strokePath.points.add(details.localPosition);
        },
        onPanUpdate: (details) {
          strokePath.points.add(details.localPosition);
          print("localPosition = ${details.localPosition}");
          print("globalPosition = ${details.globalPosition}");
        },
        onPanEnd: (details) {
          //dont think we need to do anthing here yet!
        },
        child: CustomPaint(
          
          painter: UserCanvas(globalBrush, strokePath),
          child: PaintSelector(
            globalBrush: globalBrush,
            paintList: paintList,
          ),
        ),
      ),
    );
  }
}

我不确定我的笔触是否有效，但它们只是看不见的，或者我在沿着的某个地方搞砸了。这可能与我的另一个覆盖画布的小部件有关，因为当我改变那个小部件的颜色时，整个屏幕也会改变它的颜色。代码：

import 'package:flutter/material.dart';

class PaintSelector extends StatefulWidget {
  final Paint globalBrush; // the brush the canvas uses - is changed when the user selects a new color
  final List<Paint>? paintList; // the list of paints that the user can choose from

  const PaintSelector({Key? key, required this.globalBrush, this.paintList}) : super(key: key);

  @override
  State<PaintSelector> createState() => _PaintSelectorState();
}

class _PaintSelectorState extends State<PaintSelector> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 20,
      height: 20,
      alignment: Alignment.topRight,
      color: Colors.black,
      padding: const EdgeInsets.only(top: 40),
      child: Column(
        children: [
          for (var paint in widget.paintList!)
            colorButton(
              paint: paint,
              globalBrush: widget.globalBrush,
            ),
       ]
      ),
    );
  }
}

class colorButton extends StatefulWidget {
  final Paint paint; // the individual paint that can be customized by the user eventually
  Paint globalBrush; //the brush the canvas is uses - is changed when the user selects a new color
  colorButton({super.key, required this.paint, required this.globalBrush});

  @override
  State<colorButton> createState() => _colorButtonState();
}

class _colorButtonState extends State<colorButton> {
  bool isSelected = false;
  double borderWidth = 1;
  @override

  Widget build(BuildContext context) {
    Color color = widget.paint.color;
    return GestureDetector(
      onTap: () {
        setState(() {
          widget.globalBrush = widget.paint;
          print("selected color = $color");
        });
      },
      onTapDown: (details) {
        setState(() {
          borderWidth = 4;
        });
      },
      onTapUp: (details) {
        setState(() {
          borderWidth = 1;
        });
      },
      child: Container(
        height: 50,
        width: 50,
        margin: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: color,
          border: Border.all(
            color: Colors.white,
            width: borderWidth,
          ),
        ),
      ),
    );
  }
}

几件事。

将PaintSelector堆叠在CustomPaint小部件上
在colorButton小部件中，您尝试直接更改globalBrush。这不会反映在父控件中。相反，您应该使用一个回调函数来通知父控件颜色的变化。
您可能需要检查画笔笔划是否在背景颜色下可见。

一些代码更改：
使MyHomePage成为一个有状态的小部件，并添加以下内容：

Paint globalBrush = Paint()..color = Colors.white..strokeWidth = 5;
  UserLine strokePath = UserLine();

  void updateGlobalBrush(Paint newBrush) {
    setState(() {
      globalBrush = newBrush;
    });
  }

大部分代码保持不变，直到MyHomePage中的Container的子级。子级应该是堆栈，如下所示：

Stack(
        children: [
          CustomPaint(
            painter: UserCanvas(globalBrush, strokePath),
          ),
          PaintSelector(
            globalBrush: globalBrush,
            paintList: paintList,
            onBrushChanged: updateGlobalBrush,
          ),
        ],
      )

我们已经为onBrushChanged添加了一个回调函数来更新globalBrush。我们修改PaintTable以使用此回调，如下所示：

class PaintSelector extends StatelessWidget {
  final Paint globalBrush;
  final List<Paint>? paintList;
  final Function(Paint) onBrushChanged;

  const PaintSelector({Key? key, required this.globalBrush, this.paintList, required this.onBrushChanged}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // the existing code you have
    return Positioned(
      top: 40,
      right: 0,
      child: Column(
        children: [
          for (var paint in paintList!)
            colorButton(
              paint: paint,
              onSelected: onBrushChanged,
            ),
        ],
      ),
    );
  }
}

我们还修改了colorButton。最好命名为ColorButton（命名约定）。

class ColorButton extends StatelessWidget {
  final Paint paint;
  final Function(Paint) onSelected;

  ColorButton({Key? key, required this.paint, required this.onSelected}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // the existing code you have
    return GestureDetector(
      onTap: () {
        onSelected(paint);
      },
      // the existing code you have
    );
  }
}

希望这能帮助或提供一些见解。

dart 为什么我的笔触没有出现在画布上

1条答案

相关问题

热门标签

最新问答