我的布局是一行,其中包含三个展开的小部件。
我需要在展开的小部件之一中看到溢出
这是代码
Row(
children: [
Expanded(
flex: 1,
child: Container(color: Colors.red,)
),
Expanded(
flex: 2,
child: Container(color: Colors.green,)
),
Expanded(
flex: 3,
child: Container(color: Colors.orange,)
),
],
),
现在我需要添加这样的圆圈,在 Expanded 小部件中,溢出 Expanded 小部件。我无法将 Expanded 包裹在溢出盒中,所以我迷路了
感谢任何帮助。
编辑:我用第三个扩展尝试了这个,只是为了看看它是否会溢出,但它只溢出了 SizedOverflowBox,没有溢出扩展
Expanded(
flex: 3,
child: SizedOverflowBox(
size: const Size(100.0, 100.0),
alignment: AlignmentDirectional.bottomCenter,
child: Container(height: 50.0, width: 1500.0, color: Colors.blue,),
),
),
看来不可能了
答案 0 :(得分:1)
可以通过堆栈轻松实现。请看下面的代码:
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: [
Row(
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.red,
)),
Expanded(
flex: 2,
child: Container(
color: Colors.green,
)),
Expanded(
flex: 3,
child: Container(
color: Colors.orange,
)),
],
),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
height: 25,
width: 25,
decoration:
BoxDecoration(color: Colors.black, shape: BoxShape.circle),
child: Center(
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
),
),
),
Container(
height: 25,
width: 25,
decoration:
BoxDecoration(color: Colors.black, shape: BoxShape.circle),
child: Center(
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
),
),
),
Container(
height: 25,
width: 25,
decoration:
BoxDecoration(color: Colors.black, shape: BoxShape.circle),
child: Center(
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
),
),
),
],
),
),
],
);
}
}
请查看 Text Bullet 点溢出的代码。
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(),
body: MyWidget(),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.red.withAlpha(60),
child: OverflowBox(
alignment: Alignment.topLeft,
maxWidth: 400,
child: SizedBox(
width: 300,
child: Text(
'HelloHello ?',
style: TextStyle(color: Colors.white),
),
),
),
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.green.withAlpha(60),
child: OverflowBox(
alignment: Alignment.topLeft,
maxWidth: 400,
child: SizedBox(
width: 300,
child: Container(
child: Text(
'\n\nHelloHello HelloHello ?\n\nHelloHello HelloHello ?\n\nHelloHello HelloHello ?\n\nHelloHello HelloHello ?',
style: TextStyle(color: Colors.white),
),
),
),
),
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.purple.withAlpha(60),
child: OverflowBox(
alignment: Alignment.topLeft,
maxWidth: 400,
child: SizedBox(
width: 300,
child: Text(
'\n\n\n\n\n\n\n\n\n\n\n\Hello Hello Hello Hello Hello Hello ',
style: TextStyle(color: Colors.white),
),
),
),
),
),
],
);
}
}