如何使用electron-positioner？Electron JS应用定位无明确示例

Got it, I totally get the frustration—GitHub's syntax snippets are great but lack clear, actionable examples for positioning Electron apps with electron-positioner. Let's break this down step by step so you can get your app sitting exactly where you want it.

Step 1: Install the Package #

First off, you need to add electron-positioner to your project. Fire up your terminal and run either:

npm install electron-positioner --save

or if you prefer Yarn:

yarn add electron-positioner

Step 2: Basic Setup in the Main Process #

This module works in your Electron main process (not the renderer), so you'll need to import it and link it to your BrowserWindow instance. Here's the core setup:

const { app, BrowserWindow } = require('electron');
const Positioner = require('electron-positioner');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    // Add your other window options here (like frame: false for borderless)
  });

  // Initialize the positioner with your window instance
  const positioner = new Positioner(mainWindow);

  // Now you can position the window—see examples below!
}

app.whenReady().then(createWindow);

Step 3: Common Positioning Examples #

The move() method is what does the heavy lifting. Here are the most useful preset positions and how to use them:

• Top-left corner of the primary display:

  positioner.move('topLeft');
  

• Top-right corner:

  positioner.move('topRight');
  

• Bottom-left corner:

  positioner.move('bottomLeft');
  

• Bottom-right corner:

  positioner.move('bottomRight');
  

• Center of the display (great if you want to override Electron's default center):

  positioner.move('center');
  

• Custom pixel coordinates (x/y relative to the display's top-left corner):

  positioner.move('custom', { x: 150, y: 250 });
  

Step 4: Positioning on a Specific Display (Multi-Monitor Setup) #

If you have multiple screens, you can target a specific one by passing the display object to the move() method:

const { screen } = require('electron');

// Get all connected displays
const displays = screen.getAllDisplays();

// Position on the second display's bottom-right (adjust index as needed)
positioner.move('bottomRight', { display: displays[1] });

Step 5: Re-Position After Window Resizing #

If your window is resizable, you might want to keep it anchored to a corner or position. Listen for the resize event and re-run the positioning:

mainWindow.on('resize', () => {
  positioner.move('topRight'); // Keep it stuck to the top-right even when resized
});

Quick Tips to Avoid Issues #

• Always call positioner.move() after the window's ready-to-show event if possible—this ensures the window's dimensions are fully calculated, so positioning is accurate:

  mainWindow.on('ready-to-show', () => {
    positioner.move('bottomRight');
    mainWindow.show();
  });
  

• Borderless windows work the same way—no extra configuration needed for positioning.

Hopefully these concrete examples make electron-positioner way easier to work with. If you're dealing with a weird edge case (like positioning relative to another window), feel free to dive into the module's source to tweak things further!

内容的提问来源于stack exchange，提问作者Fitsum