一些会导致布局错误的情况
阅读时间: 2 min
在 Flutter 里,Slider 组件的尺寸默认会依据父组件的约束自动调整,这时候放置到Column中,会显示失败,解决办法是包裹在SizedBox中,限制其尺寸。
以及如何获取屏幕宽度。
核心代码
import 'dart:convert';import 'dart:ffi';import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';import 'package:logging/logging.dart';import 'package:path/path.dart';
//class TestPage extends StatefulWidget { const TestPage({super.key});
@override State<TestPage> createState() => _TestPageState();}50 collapsed lines
class _TestPageState extends State<TestPage> { // 创建日志记录实例,命名为 'SendPage' final Logger logger = Logger('SendPage'); double rating = 0.0;
@override Widget build(BuildContext context) { double screenWidth = MediaQuery.of(context).size.width;
return Scaffold( appBar: AppBar( backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: const Text("记录书摘"), ), body: Padding( padding: const EdgeInsets.all(16.0), child: Center( child: // 书籍评分滑动条 Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: [ ListTile( // 设置最小垂直内边距 minVerticalPadding: 16, title: const Text('书籍评分'), subtitle: Text('$rating'), trailing: SizedBox( width: screenWidth * 0.55, child: Slider( value: rating, min: 0.0, max: 5.0, divisions: 10, onChanged: (value) { setState(() { rating = value; }); }, ), ), ), ], ), ), ), // This trailing comma makes auto-formatting nicer for build methods. ); }}