I encountered a bug in the desktop development of flutter, I used an AppBar, which placed 4 textbuttons, each TextButton set Chinese characters, but the Chinese misalignment problem would occur.
Screenshots of the error
on the web platform
on the client
Source
import 'package:flutter/material.dart';
import 'dart:io' show Platform;
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(kToolbarHeight),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(35),
blurRadius: 4,
),
],
),
child: AppBar(
actions: [
TextButton(
onPressed: () {},
child: const Text('工作台',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.normal)),
),
TextButton(
onPressed: () {},
child: const Text('我的作品',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.normal)),
),
TextButton(
onPressed: () {},
child: const Text('资源中心',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.normal)),
),
TextButton(
onPressed: () {},
child: const Text('帮助文档',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.normal)),
),
const SizedBox(width: 15),
IconButton(
icon: const Icon(Icons.notifications_outlined),
onPressed: () {},
),
const SizedBox(width: 10),
const CircleAvatar(
backgroundImage: AssetImage('assets/avatar.png'),
),
const SizedBox(width: 20),
],
backgroundColor: Colors.white,
elevation: 0,
),
),
),
body: Stack(
children: [
Expanded(
child: Container(
color: const Color.fromARGB(255, 249, 247, 247),
child: const Center(
child: Text('内容区域'),
),
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(35),
blurRadius: 4,
),
],
),
child: Row(
children: [
const Text('字数：1,234'),
const SizedBox(width: 20),
const Text('敏感词：0'),
const Spacer(),
SizedBox(
width: 300,
child: TextField(
decoration: InputDecoration(
hintText: '输入',
suffixIcon: Container(
margin: const EdgeInsets.all(8),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
minimumSize: const Size(60, 30),
),
child: const Text('执行'),
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4),
),
),
),
),
],
),
),
),
],
),
);
}
}
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '小说助手',
theme: ThemeData(
primarySwatch: Colors.blue,
fontFamily: Platform.isWindows
? 'Microsoft Yahei UI' // Windows 系统使用微软雅黑 UI
: Platform.isMacOS
? '.AppleSystemUIFont' // macOS 系统使用系统默认字体
: 'Roboto', // 其他系统使用默认字体
),
home: const HomePage(),
);
}
}
I tried to use different schemes to force alignment of the fonts here, and tried to use these buttons in different ways, but nothing worked. There was no problem with the English alignment, but I was very upset about the Chinese alignment. Now I just want to try how to display the Chinese alignment on the client side.
Update
I've tested further and if it starts with 资 then there is a problem, replacing it with another character is fine, but I don't know how many characters would have this bug.
I encountered a bug in the desktop development of flutter, I used an AppBar, which placed 4 textbuttons, each TextButton set Chinese characters, but the Chinese misalignment problem would occur.
Screenshots of the error
on the web platform
on the client
Source
import 'package:flutter/material.dart';
import 'dart:io' show Platform;
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(kToolbarHeight),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(35),
blurRadius: 4,
),
],
),
child: AppBar(
actions: [
TextButton(
onPressed: () {},
child: const Text('工作台',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.normal)),
),
TextButton(
onPressed: () {},
child: const Text('我的作品',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.normal)),
),
TextButton(
onPressed: () {},
child: const Text('资源中心',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.normal)),
),
TextButton(
onPressed: () {},
child: const Text('帮助文档',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.normal)),
),
const SizedBox(width: 15),
IconButton(
icon: const Icon(Icons.notifications_outlined),
onPressed: () {},
),
const SizedBox(width: 10),
const CircleAvatar(
backgroundImage: AssetImage('assets/avatar.png'),
),
const SizedBox(width: 20),
],
backgroundColor: Colors.white,
elevation: 0,
),
),
),
body: Stack(
children: [
Expanded(
child: Container(
color: const Color.fromARGB(255, 249, 247, 247),
child: const Center(
child: Text('内容区域'),
),
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(35),
blurRadius: 4,
),
],
),
child: Row(
children: [
const Text('字数：1,234'),
const SizedBox(width: 20),
const Text('敏感词：0'),
const Spacer(),
SizedBox(
width: 300,
child: TextField(
decoration: InputDecoration(
hintText: '输入',
suffixIcon: Container(
margin: const EdgeInsets.all(8),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
minimumSize: const Size(60, 30),
),
child: const Text('执行'),
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4),
),
),
),
),
],
),
),
),
],
),
);
}
}
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '小说助手',
theme: ThemeData(
primarySwatch: Colors.blue,
fontFamily: Platform.isWindows
? 'Microsoft Yahei UI' // Windows 系统使用微软雅黑 UI
: Platform.isMacOS
? '.AppleSystemUIFont' // macOS 系统使用系统默认字体
: 'Roboto', // 其他系统使用默认字体
),
home: const HomePage(),
);
}
}
I tried to use different schemes to force alignment of the fonts here, and tried to use these buttons in different ways, but nothing worked. There was no problem with the English alignment, but I was very upset about the Chinese alignment. Now I just want to try how to display the Chinese alignment on the client side.
Update
I've tested further and if it starts with 资 then there is a problem, replacing it with another character is fine, but I don't know how many characters would have this bug.
Share Improve this question edited Feb 2 at 2:54 Frank van Puffelen 600k85 gold badges889 silver badges859 bronze badges asked Feb 2 at 2:48 胡长靖胡长靖 1 1- I’m voting to close this question because it should have been submitted as a big report to the original developers – user2138149 Commented Feb 12 at 8:10
1 Answer
Reset to default 0I think it's the font, after I installed the SourceHanSansCN font, I adjusted the font font settings of all the characters to this format, so far everything is fine, no more character display problems.
This is my pubspec.yaml setup:
flutter:
fonts:
- family: SourceHanSans
fonts:
- asset: fonts/SourceHanSansCN-Regular.otf
- asset: fonts/SourceHanSansCN-Medium.otf
weight: 500
- asset: fonts/SourceHanSansCN-Bold.otf
weight: 700
Then I took a bit of a follow-the-font action for the text:
fontFamily: 'SourceHanSans',
// Defining Text Topics
textTheme: const TextTheme(
// Title Text Style
titleLarge: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
height: 1.4,
),
// Body Text Style
bodyMedium: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
height: 1.4,
),
// Secondary Text Styles
bodySmall: TextStyle(
fontSize: 12,
color: Colors.grey,
height: 1.4,
),
It's not an exclusive way, at the moment it's the problem of rendering Chinese characters that's related to fonts, and as soon as the appropriate fonts are replaced it should solve the Chinese rendering problem, at least at the moment I don't have any more problems here.
Note that you have to install and download the appropriate fonts!