英文:
i want to have borders on the left, right, and top, with a border radius applied to to top left and top right in flutter
问题
我想在Flutter中在左侧、右侧和顶部使用白色边框,并在左上角和右上角应用边框半径(如给定图像所示),但不想在底部应用边框(我尝试了各种方法但是...)
英文:
I want to have borders with white color on the left, right, and top, with a border radius applied to top left and top right(as the given image) in flutter..! do not want to apply border on bottom(I tried with everything but..)
答案1
得分: 3
你是指像这样设置容器的所有边框,除了底部边框之外?
这里底部边框的宽度为零,底部角没有边框半径。
import 'package:flutter/material.dart';
class SomeWidget extends StatelessWidget {
const SomeWidget({super.key});
@override
Widget build(BuildContext context) {
const BorderSide borderSide = BorderSide(width: 4, color: Colors.white);
const Radius radius = Radius.circular(20);
return Center(
child: Container(
height: 200,
width: 200,
decoration: const BoxDecoration(
color: Colors.black,
border: Border(
left: borderSide,
right: borderSide,
top: borderSide,
bottom: BorderSide(width: 0, color: Colors.white),
),
borderRadius: BorderRadius.only(topLeft: radius, topRight: radius),
),
),
);
}
}
void main() {
runApp(const MaterialApp(
home: Scaffold(
backgroundColor: Colors.green,
body: SomeWidget(),
),
));
}
英文:
Do you mean something like this to have all borders except the bottom one of a container?
Here the width for the bottom border is zero and there is no border radius for the bottom corners.
import 'package:flutter/material.dart';
class SomeWidget extends StatelessWidget {
const SomeWidget({super.key});
@override
Widget build(BuildContext context) {
const BorderSide borderSide = BorderSide(width: 4, color: Colors.white);
const Radius radius = Radius.circular(20);
return Center(
child: Container(
height: 200,
width: 200,
decoration: const BoxDecoration(
color: Colors.black,
border: Border(
left: borderSide,
right: borderSide,
top: borderSide,
bottom: BorderSide(width: 0, color: Colors.white),
),
borderRadius: BorderRadius.only(topLeft: radius, topRight: radius),
),
),
);
}
}
void main() {
runApp(const MaterialApp(
home: Scaffold(
backgroundColor: Colors.green,
body: SomeWidget(),
),
));
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论